Cross-Origin Resource Sharing

Posted on: February 13, 2016 by Dimitar Ivanov

CORS

Usually web browsers forbids cross-domain requests, due the same origin security policy. Cross-origin resource sharing (CORS) is a technique that allow servers to serve resources to permitted origin domains by adding HTTP headers to the server who are respected from web browsers.

Examples of practical use of CORS are cross-domain AJAX requests, or using fonts hosted on a subdomain.

Browser support

CORS is supported by Chrome 3+, Firefox 3.5+, IE 10+, Safari 4+, Opera 12+

Allow access from all domains

To allow access from all origins (domains), the server should send next response header:

// Raw header
Access-Control-Allow-Origin: *

// How to send the response header with PHP
header("Access-Control-Allow-Origin: *");

// How to send the response header with Apache (.htaccess)
Header set Access-Control-Allow-Origin "*"

// How to send the response header with Nginx
add_header 'Access-Control-Allow-Origin' '*';

// How to send the response header with Express.js
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    next();
});

Allow access from specific domain

To allow access from specific origin (domain), the server should send next response header:

// Raw header
Access-Control-Allow-Origin https://www.domain.com

// How to send the response header with PHP
header("Access-Control-Allow-Origin: https://www.example.org");

// How to send the response header with Apache (.htaccess)
Header set Access-Control-Allow-Origin "https://zinoui.com"

// How to send the response header with Nginx
add_header 'Access-Control-Allow-Origin' 'https://zinoui.com';

// How to send the response header with Express.js
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "https://plus.google.com");
    next();
});

Request headers

Origin
The Origin header shows the server name where the cross-domain/preflight request originates.
Access-Control-Request-Method
The Access-Control-Request-Method header is sent to the server as part of the preflight request and informs it about the HTTP method that will be used in the actual request.
Access-Control-Request-Headers
The Access-Control-Request-Headers header is sent to the server as part of the preflight request and informs it about headers that will be used in the actual request.

Response headers

Access-Control-Allow-Origin
The Access-Control-Allow-Origin header indicates whether a resource can be shared.
Access-Control-Allow-Credentials
The Access-Control-Allow-Credentials header indicates whether the response to request can be exposed when the credentials flag is true.
Access-Control-Expose-Headers
The Access-Control-Expose-Headers response header brings information about headers that browsers could allow accessing.
Access-Control-Max-Age
The Access-Control-Max-Age header indicates how much time, the result of a preflight request, can be cached.
Access-Control-Allow-Methods
The Access-Control-Allow-Methods header is returned by the server in a response to a preflight request and informs the browser about the HTTP methods that can be used in the actual request.
Access-Control-Allow-Headers
The Access-Control-Allow-Headers header is returned by the server in a response to a preflight request and informs the browser about the HTTP headers that can be used in the actual request.