Example Nginx configuration for adding cross-origin resource sharing (CORS) support to reverse proxied APIs

nginx.conf

#
# CORS header support
#
# One way to use this is by placing it into a file called "cors_support"
# under your Nginx configuration directory and placing the following
# statement inside your **location** block(s):
#
#   include cors_support;
#
# As of Nginx 1.7.5, add_header supports an "always" parameter which
# allows CORS to work if the backend returns 4xx or 5xx status code.
#
# For more information on CORS, please see: http://enable-cors.org/
# Forked from this Gist: https://gist.github.com/michiel/1064640
#

set $cors '';
if ($http_origin ~ '^https?://(localhost|www\.yourdomain\.com|www\.yourotherdomain\.com)') {
        set $cors 'true';
}

if ($cors = 'true') {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
        # required to be able to read Authorization header in frontend
        #add_header 'Access-Control-Expose-Headers' 'Authorization' always;
}

if ($request_method = 'OPTIONS') {
        # Tell client that this pre-flight info is valid for 20 days
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
}

where should i put this - should it be at the end of /etc/nginx/sites-enabled in the site config

@semusi You should place it within the curly braces in the server { ... } block of your configuration, which you will find inside the file(s) in /etc/nginx/sites-enabled/. It shouldn't matter where you place it within the server block.

Edit: You should put it in your location block(s).

If you have multiple server blocks that you want to use CORS with, you can also save this as a separate file in /etc/nginx/cors and within your server blocks, enter "include cors;" which will include the file.

Thanks for this code.

Is there any workaround to set the headers (and get the content) when the server returns a 4xx or 5xx status code?

Try this: http://serverfault.com/questions/393532/allowing-cross-origin-requests-cors-on-nginx-for-404-responses

I just tried this for an issue I'm having getting a meteor android app connected, but "nginx -t" gives:

2015/06/02 12:31:55 [emerg] 7055#0: "add_header" directive is not allowed here in /etc/nginx/sites-enabled/mysite.com.conf:22

I'm running nginx 1.8.0 on Ubuntu 14.04. Has something changed recently?

I have a same problem with chrisco 23

@chrisco23 If you are using Ubuntu then should install nginx-extras package to use more_set_headers config

sudo apt-get install nginx-extras

awesome! thanks!

Thanks for this! For people having trouble saying that the "add_header" directive is not allowed here, move the code inside of the location brackets instead of on the server{} level of your configuration.

Is there a reason why you separated the first 2 if statements? Will it not work if I combine and eliminate the variable?

One painful caveat I just discovered is that nginx (as of 1.9) treats the if block as separate context, so if you have add_header elsewhere in the block where you include this then it won't work. Otherwise great one, much nicer than the header repeating ones Google throws up on the top!

Thanks for this gist. I forked it for Nginx > 1.9 with support for 4xx and 5xx response and exposition of authorization header. https://gist.github.com/agouriou/735daacf7530675552ff248f319a07d9

Does this work if I am running javascript on my page that manipulates the page on the nginx server?

For example:
another = window.open("http://site-on-ngix.com/page.php", "_blank");
another.document.getElementsByName("name")[0].value= "marco";

I keep getting
"Uncaught DOMException: Blocked a frame with origin"

Thanks for this! It works great. Something I discovered: When serving up polygons, if they are styled with a fill opacity of 0.0, GetFeatureInfo will not return any data (unless you click the outline of the polygon). Changing style fill opacity to 0.1 fixed this.

Thanks for the comments guys, I've updated this gist to include support the "always" parameter for nginx 1.7.5+ so that you can get non-200 responses returned back correctly.

I've also added a line for exposing the authorization header based on @agouriou's fork.

In addition, I removed the proprietary X-Mx-ReqToken header and added directives for caching for pre-flight requests, with a content length set to avoid chunked responses.

does it work for both of http and https?

Yes, @fakirpic. The 's' is optional because of the question mark
https?

This doesn't appear to work if included in a location that uses try_files because of this situation https://www.nginx.com/resources/wiki/start/topics/depth/ifisevil/ . Any idea how to get around this?

Correct me if I'm wrong, but you're defining the $cors variable only to use it once, which makes it useless. So you can actually simplify your first if to use line 18 for the conditional.
However if your goal was to use the $cors variable in the second if block (to prevent from returning CORS headers from any origin), you should actually do something like my forked gist: https://gist.github.com/habovh/23506240581b3ca5edc236948808799f

I've added those codes above in my server { . . . } as suggested. I kept getting

nginx: [emerg] "add_header" directive is not allowed here in /etc/nginx/sites-enabled/d.site.com:26
nginx: configuration file /etc/nginx/nginx.conf test failed

Here is my entire configs

server {

    listen 80;
    server_name d.site.com;
    root /home/forge/d.site.com/distributor-application/laravel/public;

    # Enable this line for debugging to see which php.ini get use ... $php --ini
    # root /home/forge/d.site.com/public;


    # FORGE SSL (DO NOT REMOVE!)
    # ssl_certificate;
    # ssl_certificate_key;

    index index.html index.htm index.php;

    charset utf-8;


    set $cors '';
    if ($http_origin ~ '^https?://(localhost|www\.site\.com|www\.d.site\.com|www.\.jsfiddle\.net)') {
            set $cors 'true';
    }

    if ($cors = 'true') {
            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
            # required to be able to read Authorization header in frontend
            #add_header 'Access-Control-Expose-Headers' 'Authorization' always;
    }

    if ($request_method = 'OPTIONS') {
            # Tell client that this pre-flight info is valid for 20 days
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
    }



    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/d.site.com-error.log error;

    error_page 404 /index.php;

    location ~ \.php$ {

        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_read_timeout 600;
       fastcgi_send_timeout 600;
       fastcgi_buffers 16 16k;
       fastcgi_buffer_size 32k;
        fastcgi_index index.php;
        include fastcgi_params;

    }

    location ~ /\.ht {
        deny all;
    }

}

Please let me know what I did wrong !!!

@bunlongheng see http://stackoverflow.com/questions/27955233/nginx-config-for-cors-add-header-directive-is-not-allowed

@bunlongheng you must to put your add_header inside location / {

Please read this comment if you plan to use the above gist.

The above code contains a very serious vulnerability. Specifically this line:

Vulnerable

if ($http_origin ~ '^https?://(localhost|www\.site\.com|www\.d.site\.com|www.\.jsfiddle\.net)') {

Safe

Note, the $ at the end of the regex, terminating the line. What is actually meant is:

if ($http_origin ~ '^https?://(localhost|www\.site\.com|www\.d.site\.com|www.\.jsfiddle\.net)$') {

Without the extra $, you have essentially turned off all security for your website.

The attacker would do the following to exploit this.

1. Create a subdomain of their website. For this example, www.site.com.evil.com would be the attackers site.
2. Lure your logged in users to their evil web page.
3. Send ajax requests from www.site.com.evil.com to www.site.com with credentials
4. Because ACAC is set true, and ACAO will reflect the origin header, the AJAX will return successfully.

Please feel free to ping me if you have any questions.

You could use nginx maps in favor of the regex:

map $http_origin $DO_CORS {

  # indicates all map values are hostnames and should be parsed as such
  hostnames;

  # default value
  default 'false';

  # all your domains
  localhost          'true';
  www.yourdomain.com 'true';
  www.yourother.com  'true';
}

This also prevents the attack detailed by @ejcx

Here is my version of doing nginx access control allow origin that avoids some of the duplication.

I created a new file in /etc/nginx/conf.d 'cors.conf' with the the below configuration.

Note: My use case was to enable Cors for an nginx reverse proxy which forwards the request to my flask application on docker. My front-end is hosted on AWS S3.

server {
listen 80;

    location / {

        proxy_pass            http://docker;
        proxy_http_version    1.1;
        proxy_set_header    Connection            $connection_upgrade;
        proxy_set_header    Upgrade                $http_upgrade;
        proxy_set_header    Host                $host;
        proxy_set_header    X-Real-IP            $remote_addr;
        proxy_set_header    X-Forwarded-For        $proxy_add_x_forwarded_for;


            set $cors '';
                    if ($http_origin ~ '^https?://(s3\.amazonaws\.com)') {
                            set $cors 'true';
                    }

                    if ($cors = 'true') {
                            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
                            add_header 'Access-Control-Allow-Credentials' 'true' always;
                            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
                            add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
                            # required to be able to read Authorization header in frontend
                            #add_header 'Access-Control-Expose-Headers' 'Authorization' always;
                    }

                    if ($request_method = 'OPTIONS') {
                            # Tell client that this pre-flight info is valid for 20 days
                            add_header 'Access-Control-Max-Age' 1728000;
                            add_header 'Content-Type' 'text/plain charset=UTF-8';
                            add_header 'Content-Length' 0;
                            return 204;
                    }


    }
}

I really don't know why this is working for you, guys. If is broken. https://www.nginx.com/resources/wiki/start/topics/depth/ifisevil/ Nginx configuration is not imperative. There is no guarantees that any other block, except for if with return will be executed in case of OPTIONS request.

If you really need sane CORS functionality, it's better to use some Lua.

save your soul and use the lua below!

https://github.com/detailyang/lua-resty-cors

Please be aware that this will allow your resources to be accessed cross-origin by anybody with a domain name like http://localhost-hacker.biz or https://localhost.blackhat.org. Add a $ to that regex...

My complete script that works both on my website and localhost:

• Avoided if, mentioned in ifisevil
• Fixed regex vulnerability, pointed out by @ejcx above.

In this script, my server is blog.mywebsite.com. It enabled CORS mywebsite.com and localhost to access requested resource.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name blog.mywebsite.com;
    root /var/www/ghost/system/nginx-root;

    ssl_certificate /etc/letsencrypt/blog.mywebsite.com/fullchain.cer;
    ssl_certificate_key /etc/letsencrypt/blog.mywebsite.com/blog.mywebsite.com.key;
    include /etc/nginx/snippets/ssl-params.conf;

    set $cors_origin "";
    set $cors_cred   "";
    set $cors_header "";
    set $cors_method "";

    if ($http_origin ~ '^https?://(localhost|mywebsite\.com)$') {
            set $cors_origin $http_origin;
            set $cors_cred   true;
            set $cors_header $http_access_control_request_headers;
            set $cors_method $http_access_control_request_method;
    }

    add_header Access-Control-Allow-Origin      $cors_origin;
    add_header Access-Control-Allow-Credentials $cors_cred;
    add_header Access-Control-Allow-Headers     $cors_header;
    add_header Access-Control-Allow-Methods     $cors_method;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;
    }

    location ~ /.well-known {
        allow all;
    }
    client_max_body_size 50m;
}

Thanks very much guys ! this code plus @RubenHoms 's comment worked like a charm.

Hello guys!

We have got working config only with the following trick:

`

if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) {
    return 444;
}
    
set $origin $http_origin;

if ($origin !~ '^https?://(subdom1|subdom2)\.yourdom\.zone$') {
    set $origin 'https://default.yourdom.zone';
}

if ($request_method = 'OPTIONS') {

    add_header 'Access-Control-Allow-Origin' "$origin" always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Accept, Authorization' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;

    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 ~ '(GET|POST|PATCH|PUT|DELETE)') {
    add_header Access-Control-Allow-Origin "$origin" always;
    add_header Access-Control-Allow-Methods 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
    add_header Access-Control-Allow-Headers 'Content-Type, Accept, Authorization' always;
    add_header Access-Control-Allow-Credentials true always;
}

`

if block can be implemented with map
may be it can help somebody