How to enable CORS in Nginx proxy server?

The issue is that your if condition is not going to send the headers in the parent in /. If you check the preflight response headers it would be

HTTP/1.1 204 No ContentServer: nginx/1.13.3Date: Fri, 01 Sep 2017 05:24:04 GMTConnection: keep-aliveAccess-Control-Max-Age: 1728000Content-Type: text/plain charset=UTF-8Content-Length: 0

And that doesn't give anything. So two possible fixes for you. Copy the add_header inside if block also

server {  listen 80;  server_name api.localhost;  location / {    add_header 'Access-Control-Allow-Origin' 'http://api.localhost';    add_header 'Access-Control-Allow-Credentials' 'true';    add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';    if ($request_method = 'OPTIONS') {      add_header 'Access-Control-Allow-Origin' 'http://api.localhost';      add_header 'Access-Control-Allow-Credentials' 'true';      add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';      add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';      add_header 'Access-Control-Max-Age' 1728000;      add_header 'Content-Type' 'text/plain charset=UTF-8';      add_header 'Content-Length' 0;      return 204;    }    proxy_redirect off;    proxy_set_header host $host;    proxy_set_header X-real-ip $remote_addr;    proxy_set_header X-forward-for $proxy_add_x_forwarded_for;    proxy_pass http://127.0.0.1:3000;  }}

Or you can move it outside the location block, so every request has the response

server {   listen 80;   server_name api.localhost;   add_header 'Access-Control-Allow-Origin' 'http://api.localhost';   add_header 'Access-Control-Allow-Credentials' 'true';   add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';   add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';  location / {    if ($request_method = 'OPTIONS') {      add_header 'Access-Control-Max-Age' 1728000;      add_header 'Content-Type' 'text/plain charset=UTF-8';      add_header 'Content-Length' 0;      return 204;    }    proxy_redirect off;    proxy_set_header host $host;    proxy_set_header X-real-ip $remote_addr;    proxy_set_header X-forward-for $proxy_add_x_forwarded_for;    proxy_pass http://127.0.0.1:3000;  }}

If you only want to allow certain locations in your config for CORS. like /api then you should create a template conf with your headers

 add_header 'Access-Control-Allow-Origin' 'http://api.localhost'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'; add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

and then use

include conf.d/corsheaders.conf;

in your OPTIONS block and /api block. So CORS are only allowed for the /api. If you don't care which location for CORS then you can use the second approach of moving core headers to server block