Browser - Cross Origin Resource Sharing (CORS)

Simple

An HTTP request is simple if all of the following conditions are true:

• The request method is:
  • GET,
  • HEAD,
  • or POST.
• If it is a POST method request, it must include an Origin header.
• The request content type is standard ie:
  • text/plain,
  • multipart/form-data,
  • or application/x-www-form-urlencoded.
• The request does not contain custom headers ³⁾. Custom HTTP header are headers that are not:
  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type

Simple request does not need the extra authorization request known as preflight or option request.

Non-simple

All cross-origin HTTP requests that are not simple are non-simple requests.

For non-simple request, an extra authorization request known as preflight or options is executed.

Preflight request

The Preflight request is an extra authorization request that is executed if the request is not simple.

A Preflight request is a request:

• with OPTIONS method
• with an Origin HTTP header
• that expects a response with only the CORS headers.

The browser checks the headers and upon browser “approval”, the browser sends the actual request with the actual HTTP request method (ie make available to the javascript)

The preflight response may be cached via the access-control-max-age response header

CORS Response Headers

The server sends a response with headers (in all cross request - preflight or not) indicating what is allowed. See Response headers

For instance, the most important is the access-control-allow-origin header that indicates which origin sites are allowed.

For example, if you add the below header to your response, you will allow the page/script of http://www.example.com to make request in the browser against your website.

Access-Control-Allow-Origin: http://www.example.com

Web Server

Each third application web server has its way to configure the setting of response header for a request.

• In this article, we are showing how to do it for Apache.
• For Nginx and other web server, you can check this web site: https://enable-cors.org/

Http server

If you are developing or using your own http server in your code, you would generally set the CORS Headers via a handler.

• Example with an Express application, allowing cors for local development.

const allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');

  next();
};
app.use(allowCrossDomain);

• For Vertx, see the dedicated page Vertx - Cors

Proxy

A a gateway (reverse proxy) can be configured to add the cors headers to a response.

Proxy are just http server that acts as a middle-man where the http requests and response transit.

Response to preflight request doesn't pass access control check

A preflight request is Options request.

Just add the Access-Control-Allow-Origin to the response. See enable cross request

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

No luck

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

Answer: Configure the server to set the header access-control-allow-headers

Example with apache

Header set Access-Control-Allow-Headers "Content-Type"