Browser - Cross Origin Resource Sharing (CORS)

Cross-origin resource sharing (CORS) is a protocol that describes how cross-origin requests should be executed in the browser.

This mechanism/protocol is used during a fetch that:

• allows or disallows data resources from an origin
• to be requested by a web page from another origin

The main motivation behind Cross-Origin Resource Sharing (CORS) was to remove the same origin restriction from various APIs so that resources can be shared among different origins.

The article just below explains the basic about the what and the how of CORS. If this is the first time that you encounter a CORS issue, this is a good reading point to start:

• Browser / HTTP - CORS getting started and explanation

Below is the CORS fetch procedure policy described.

Steps (that comes from cors enabled fetch algorithm - Reference):

Custom HTTP header are headers that are not:

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type

If the cross-origin request has any other headers, a preflight request is executed. Ref

A forbidden header is one of the following

• Accept-Charset
• Accept-Encoding
• Access-Control-Request-Headers
• Access-Control-Request-Method
• Connection
• Content-Length
• Cookie
• Cookie2
• Date
• DNT
• Expect
• Host
• Keep-Alive
• Origin
• Proxy-*
• Referer
• Sec-*
• TE
• Trailer
• Transfer-Encoding
• Upgrade
• Via

The Preflight request is a HTTP OPTIONS request (with an Origin HTTP header) that is sends only in certain situation (see added latency part of the diagram) that expects a response with only the CORS headers.

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.

The server respond 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

To enable CORS request, you need to set the appropriate headers on the server response via the following possibilities:

• Apache: Configuration of the server.
• http server via a Handler (Middelware).
• A gateway (reverse proxy) that acts as a middle man

To configure cors on a Apache server, you may do it:

• in a htaccess file
• or via the mod_headers module.

• Apache - htaccess file

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

• in the Apache configuration file with the mod_headers module enabled.

<!-- for directory -->
<Directory "/path/to/dir">
   <IfModule mod_headers.c>
      Header set Access-Control-Allow-Origin "*"
   </IfModule>
</Directory>

<!-- for specific file -->
<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header Set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

<!-- Mutliple Domain -->
<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    </IfModule>
</FilesMatch>

Http server can set the CORS Headers via a handler.

Allowing cors into an Express application 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);

Vertx - Cors

https://enable-cors.org/server_nginx.html

The HTTP headers that configure the CORS authorization are listed below.

See documentation at https://fetch.spec.whatwg.org/

This is the headers that a preflight request uses to check what is allowed or not in a cross-origin request.

The origin request header indicates the origin of the code that want to fetch a resource

Indicates which method a future CORS request to the same resource might use.

Access-Control-Request-Method: POST

Indicates which headers a future CORS request to the same resource might use.

If an URL resource implements CORS, the server needs to define the request property that it will accept (ie

• origins
• HTTP methods
• and type of data

Access-Control-Allow-Origin (ACAO) define the allowed origins

• Open to every origin

Access-Control-Allow-Origin: *  

• Open only to the origin http://example.com

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

Example of error that you can get:

Indicates whether the response can be shared when request’s credentials mode is include.

access-control-allow-credentials: true

Give the permission to the code that makes the cross-origin rquest, to list the headers that were set (ie the code knows which header was set but cannot read their value)

Access-Control-Expose-Headers: Content-Type

The preflight request is valid and goes into the preflight cache for how many seconds.

Example for 20 days:

Access-Control-Max-Age: 1728000;

Which methods are allowed in a cross-origin request

Access-Control-Allow-Methods: PUT, DELETE

This header is used in response to the preflight request which includes the Access-Control-Request-Headers to indicate which HTTP headers are allowed by a cross-origin request.

Example

Access-Control-Allow-Headers: x-requested-with, Content-Type, origin, authorization, accept, client-security-token

A preflight request is Options request.

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

No luck

Answer: Configure the server to set the header Access-Control-Allow-Headers

Example with apache

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

• Cross-origin_resource_sharing
• wiki/CORS
• https://fetch.spec.whatwg.org/
• cors enabled fetch algorithm
• Cross-Origin Resource Sharing