Cross-Origin Resource Sharing

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.

HTTP Headers for Wordpress

Make your website more secure by using the HTTP Headers for Wordpress, and never face a cross-origin issue again. Oh yes, it's FREE.

Download HTTP Headers v1.11.0

• Cross Domain AJAX Request
• Cross Domain AJAX Upload
• Cross-Domain Iframe Resize
• Progress Indicator for AJAX Request
• Crawlable AJAX Applications

If you have questions about cross-origin resource sharing, drop a comment below. Thanks so much for reading!