Enabling CORS on nginx - nginx

Question

I have followed this example to enable CORS on my API subdomain so that I can send requests to it from SwaggerUI. This is the output I get from running OPTIONS on that subdomain:
curl -i -X OPTIONS http://api.MYDOMAIN.com/v1/data/extraction
HTTP/1.1 204 No Content
Server: nginx/1.10.3 (Ubuntu)
Date: Wed, 18 Apr 2018 20:45:52 GMT
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-API-Key
Access-Control-Max-Age: 1728000
Content-Type: text/plain charset=UTF-8
Content-Length: 0
I'm stuck on where to go to figure out why in Chrome on my docs subdomain (same DOMAIN.com server) it still gives me this. Can anyone advise where I should look to?

Answer 1

I had a similar issue and couldn't get it to work. This setup finally worked for me. https://gist.github.com/Stanback/7145487 this is what it looks like. I just set $cors 'true' to test if it worked. It worked for me. This is all in the /location {...} area
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') {
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;
# 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;
}

Answer 2

All it came down to the fact that NGINX had used more_set_headers instead of add_header (it may've been that NGINX had this module enabled) and after that using one of the above examples with it made it working.

Answer 3

You might want to test a call to api.MYDOMAIN.com/v1/data/extraction with curl and a CORS origin header.
curl -i -X POST -H "Origin: http://docs.whatever.com" \
--verbose http://api.MYDOMAIN.com/v1/data/extraction
The response should come back with the header:
Access-Control-Allow-Origin: *
If that header does not come back with the response, chrome will throw an error like what you saw.
P.S. there is a mention in the error that nginx responded with a 404, which might have something to do with it.

Answer 4

The problem might well be that Access-Control-Allow-Origin: * and Access-Control-Allow-Credentials: true are incompatible - if you want to pass credentials, you will need to respond with Access-Control-Allow-Origin: {value-of-Origin-request-header} and Access-Control-Allow-Credentials: true.