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;
}

I'm just familiarizing myself with nginx configurations, but apparently

* if You use an `add_header` directive in an `if` statement, no other `add_header` from outside the `if` seems to apply

That's because IF is evil

Having enabled the snippet, I scanned my site with nuclei and discovered that the regex '^https?://(localhost|www\.yourdomain\.com|www\.yourotherdomain\.com)' allows for suffixing the domain with anything, as in e.g. www.yourdomain.com.honeypot.com. I amended the regex with a '$' at the end (as in www\.yourotherdomain\.com)$' and it was smooth sailing.

mPanasiewicz Works like a charm! thanks

Hello @mPanasiewicz & @piotrekkr i saw you master niginx. Thank you for your good job I have a vps server with nginx and tomcat10..17, my frontend is not hosted on my vps. i have deployed my api java and test it throught postman and everything work but while i tried to fetch data from the frontend android and http this issue appear
Access to fetch at 'https://api.domain.com/directives/api/v1/file=' from origin 'https://domain.dev/' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

y81mcnb3w9p5cep8

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;
}

Your solution more or less worked for me using nginx version 1.12.2 Not sure which version of nginx you were using, but I couldn't run add_headers in my server block, but could in my location block which worked fine. Thanks.

add_header can work in http context .see http://nginx.org/en/docs/http/ngx_http_headers_module.html

worked like charm.