NGINX - Access-Control-Allow-Origin

Those who often read this blog already know that we're deeply in love with NGINX, a lightweight, high-performance and open-source web server and reverse proxy used by more than 358 million websites and over 66% of the world’s top 10,000 websites. And no, we're not taking money from them to say this, we just happen to like it a lot.

Anyway, in this post I'll briefly share the CORS configuration I'm using for the web sites that need to perform Cross Request Resource Sharing activities of any kind - such as using web-fonts from a subdomain on a main domain, or something like that:

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';

        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }
}

location / {

if ($request_method = 'OPTIONS') {

add_header 'Access-Control-Allow-Origin' '*';

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

add_header 'Access-Control-Max-Age' 1728000;

add_header 'Content-Type' 'text/plain charset=UTF-8';

add_header 'Content-Length' 0;

return 204;

}

if ($request_method = 'POST') {

add_header 'Access-Control-Allow-Origin' '*';

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

if ($request_method = 'GET') {

add_header 'Access-Control-Allow-Origin' '*';

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

WARNING: i used * for the sake of simplicity, but you can - and should - always limit those rules to a more restrictive domain/subdomain list, unless you really want to enforce a wide-open CORS policy (and you're fully aware of the implications).

Since it's a pretty long piece of code, you might want to put this on a separate file (such as /etc/nginx/cors-settings.conf ) and then include it with the following one-liner:

include /etc/nginx/cors-settings.conf;

1	include /etc/nginx/cors-settings.conf;

Pretty neat, isn't it?

If you're looking for further info about how to set & configure other NGINX security headers, such as X-Frame-Options, HTTP Strict Transport Security (HSTS), X-XSS-Protection, X-Content-Type-Options, Content Security Policy and Referrer Policy, be sure to check our NGINX HTTP Security Headers guide.

This post is part of a series of articles, tutorials and guides on the NGINX web server & reverse proxy. To read the other posts, click here!

Print Friendly & PDF Download

One Comment on “NGINX - Access-Control-Allow-Origin - CORS policy settings How to properly set the Access-Control-Allow-Origin header to NGINX to allow Cross Request Resource Sharing for all (or specific) sites”

Renato says:

November 18, 2019 at 12:28

Job for nginx.service failed because the control process exited with error code.
See “systemctl status nginx.service” and “journalctl -xe” for details.

NGINX - Access-Control-Allow-Origin - CORS policy settings How to properly set the Access-Control-Allow-Origin header to NGINX to allow Cross Request Resource Sharing for all (or specific) sites

About Ryan

One Comment on “NGINX - Access-Control-Allow-Origin - CORS policy settings How to properly set the Access-Control-Allow-Origin header to NGINX to allow Cross Request Resource Sharing for all (or specific) sites”

Leave a Reply Cancel reply

Related Posts

The role of the Web Server General overview of the tool that handles the HTTP requests and provides responses: what it is, what it does, what it is for

Web Administrator Training Course A learning path to acquire the necessary skills to configure, manage and administer a web server on Windows, Linux, and in the Cloud

Configure HTTP Basic Authentication on NGINX How to implement HTTP Basic Authentication in a NGINX web server to restrict access for your website users with a simple username/password challenge

About Ryan

One Comment on “NGINX - Access-Control-Allow-Origin - CORS policy settings How to properly set the Access-Control-Allow-Origin header to NGINX to allow Cross Request Resource Sharing for all (or specific) sites”

Leave a Reply Cancel reply