Still get data even there is a CORS issue in Nginx

devwannabe asked:

I’m trying to debug a CORS issue. Here’s my configuration
I’m using http://www.test-cors.org/ to test my Nginx rules.
I get the message below in my browser’s console when the method I use is OPTIONS. But I still received the data which is very weird

Failed to load http://www.example.com:8009/testcors: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.test-cors.org' is therefore not allowed access.

I get the message below if the method I use is GET. I also get the data

Failed to load http://www.example.com:8009/testcors: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.test-cors.org' is therefore not allowed access.

Here’s my updated nginx configuration

 map $http_origin $allow_origin {
   default "";
   ~example.com "$http_origin";
 }

Now in server block …

 location /testcors {
    if ($request_method = 'OPTIONS') {
       add_header 'Access-Control-Allow-Origin' $allow_origin;
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
       add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
       add_header 'Access-Control-Max-Age' 60;
       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' $allow_origin;
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
       add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
       add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }

    if ($request_method = 'GET') {
       add_header 'Access-Control-Allow-Origin' $allow_origin;
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
       add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
       add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }

   add_header Content-Type "application/json; charset=utf-8";
   return 200 '{"code": 200, "reason": "Testing CORS ..."}';
 }

And the result of that is here(screenshots of chrome dev tools) https://imgur.com/a/PiEks

My answer:


The problem is that you are not sending CORS headers in your location /testcors.

You only send these in the server block, for any other location.

The reason for this is that add_header directives in lower level blocks completely override those in higher level blocks. So, because you have used add_header in your location, you must also include all the other add_header directives again.

To keep your configuration DRY, you should consider making an include file which contains the common add_header directives, and then include it at each relevant point in the configuration.


View the full question and answer on Server Fault.

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.