Categories

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.

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.
See also
Social sharing

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


5 Comments

Oliver
How to enable CORS for certain file types, for example, only fonts? Thanks
Dimitar Ivanov
Hi Oliver,
To accomplish this, use FilesMatch directive to target multiple files with RegEx (Apache servers only)

<FilesMatch ".(eot|otf|svg|ttf|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Robson
Hi Oliver,
My name is Robson from Brazil, I am Java developer most came a demand for a mobile hybrid app (HTML and JavaScript) so I'm having problems with the Requisition cross-origin, my server is a Tomcat 7 has configured the CORS as required by changing documentation web.xml nothing changed still get the error:
The same origin policy (Same Origin Policy) prevents reading the remote resource in http://127.0.0.1:8080/TSE/webservices/TSEServices.jws?wsdl. (Reason: CORS header 'Access-Control-Allow-Origin' is not present).

I am using ajax () function JQ, I saw your article you have any comments for those who use Tomcat? How do I insert Access-Control-Allow-Origin: * ?

<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>

I saw that you are a Front End Developer else can be that you have been through this
Dimitar Ivanov
Dimitar Ivanov May 7, 2016 at 09:44 am
Hi Robson,

To enable cross-origin requests on Apache Tomcat 7 use this filter:

<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
Amit Srivastava
how can I allow certain URLs to be accessible via http request outside my domain.

Leave a comment

Captcha