Swagger behind Nginx Proxy and CORS error
Hi all! I have a problem. I would like to not get an CORS error after pasting in swagger available under swagger.example.com the link to the file available under testing.example.com/plik.yaml. The v...
Forum Discussion
ponelat
Staff
StaffHey Newbie1 ,
It's a little out of scope of Swagger UI, how you configure the server for CORS. All browser clients should behave in a similar fashion.
That said, you should be able to get far debugging the exact error messages that appear in the console. And using https://www.test-cors.org/ to help debug issues.
Console errors can look like his:
You'll note that https://example.com doesn't have a `Access-Control-Allow-Origin` header, in your case you may notice other errors.
Here is an nginx example: https://enable-cors.org/server_nginx.html
Assuming you want full access to the API via the browser, you'd need to use:
- Access-Control-Allow-Origin: <the exact host name> (wildcard * has limitations on Authorization). This is something you're doing though.
- Access-Control-Allow-Headers: GET,POST,PUT,etc
And you'll also need to accept OPTIONS request for preflight requests (the browser asks the server before making the actual request)
Hope that helps!
ponelat In my case it looks like this:
It's from Chrome. From firefox error from console is more accurate:
If you have any hints - appreciate! I am still trying resolve it.
PS
I also tried to copy paste config from this site https://enable-cors.org/server_nginx.html to swagger.example.com nginx config. Still nothing. Maybe something with proxy headers etc?
- ponelat
Newbie1 I see the standard error, the response headers are missing:`Access-Control-Allow-Origin: docs.swagger.example.com` .
This was surmised from "CORS Missing Allow Origin" error.
Be sure to support an OPTION pre-flight requests as well as returning the `Access-Control-Allow-Origin: docs.swagger.example.com`.
ponelat Thank you for an answer. I add whole config from https://enable-cors.org/server_nginx.html to the nginx config of the t1.example.com:
add_header 'Access-Control-Allow-Origin' '*'; location / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # # Custom headers and headers various browsers *should* be OK with but aren't # add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # # 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; } if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always; } }and now Chrome returns something like this:
and Firefox:
- ponelat
Newbie1 That's addressed a CORS issue, since the error appears to be from the server (unregistered device doesn't sound like any browser/web api error).
To support Authorization headers, you need to change from `*` to an explicit origin. You can confirm by trying a hardcoded one, and if that works you can figure out how to make it dynamic (with nginx).
Replace all instances with this...
add_header Access-Control-Allow-Origin: 'docs.swagger.example.com' always;