How to enable CORS in Nginx proxy server?

by

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 Content
Server: nginx/1.13.3
Date: Fri, 01 Sep 2017 05:24:04 GMT
Connection: keep-alive
Access-Control-Max-Age: 1728000
Content-Type: text/plain charset=UTF-8
Content-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

More Related Contents:

  1. nginx proxy pass Node, SSL?
  2. Why doesn’t adding CORS headers to an OPTIONS route allow browsers to access my API?
  3. Node.js + Nginx – What now?
  4. No ‘Access-Control-Allow-Origin’ – Node / Apache Port Issue
  5. Socket.io + Node.js Cross-Origin Request Blocked
  6. HTTP2 with node.js behind nginx proxy
  7. nginx as webserver incl. socket.io and node.js / ws:// 400 Bad Request
  8. How to enable cross-origin resource sharing (CORS) in the express.js framework on node.js
  9. Allow CORS REST request to a Express/Node.js application on Heroku
  10. HAProxy + WebSocket Disconnection
  11. Proxy with express.js
  12. node.js itself or nginx frontend for serving static files?
  13. Enable Access-Control-Allow-Origin for multiple domains in Node.js [duplicate]
  14. 502 Bad Gateway Deploying Express Generator Template on Elastic Beanstalk
  15. POST request not allowed – 405 Not Allowed – nginx, even with headers included
  16. Access to XMLHttpRequest at ‘…’ from origin ‘localhost:3000’ has been blocked by CORS policy
  17. Getting express server to accept CORS request
  18. Meteor WebSocket handshake error 400 with nginx
  19. CORS-enabled server not denying requests
  20. Command to remove all npm modules globally
  21. Pipe a stream to s3.upload()
  22. How does one start a node.js server as a daemon process?
  23. using profile that assume role in aws-sdk (AWS JavaScript SDK)
  24. socket.io and express 4 sessions
  25. What is the difference between addListener(event, listener) and on(event, listener) method in node.js?
  26. Which SchemaType in Mongoose is Best for Timestamp?
  27. Proper request with async/await in Node.JS
  28. node –experimental-modules, requested module does not provide an export named
  29. How do I replace deprecated crypto.createCipher in Node.js?
  30. sails.js Use session param in model

Leave a Comment