CORS Errors

What the heck is CORS?

Cross-origin resource sharing (CORS) is a mechanism that allows to share resources outside of the domain from which the resource is first shared.1

Suppose a user visits http://www.example.com and the page attempts a cross-origin request to fetch the user's data from http://service.example.com. A CORS-compatible browser will attempt to make a cross-origin request to service.example.com as follows.

  • The browser sends the GET request with an extra Origin HTTP header to service.example.com containing the domain that served the parent page:

    Origin: http://www.example.com

The server at service.example.com may respond with:

  • The requested data along with an Access-Control-Allow-Origin (ACAO) header in its response indicating the requests from the origin are allowed. For example in this case it should be:

    Access-Control-Allow-Origin: http://www.example.com
  • The requested data along with an Access-Control-Allow-Origin (ACAO) header with a wildcard indicating that the requests from all domains are allowed:

    Access-Control-Allow-Origin: *
  • An error if the server does not allow a cross-origin request

When performing certain types of cross-domain Ajax requests, modern browsers that support CORS will initiate an extra "preflight" request to determine whether they have permission to perform the action. Cross-origin requests are preflighted this way because they may have implications to user data.

OPTIONS /
Host: service.example.com
Origin: http://www.example.com
Access-Control-Request-Method: PUT

If service.example.com is willing to accept the action, it may respond with the following headers:

Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: PUT, DELETE

The browser will then make the actual request. If service.example.com does not accept cross-site requests from this origin then it will respond with an error to the OPTIONS request and the browser will not make the actual request.

\

Last updated