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
Hey Newbie1
It's a little hard to visualize what you're after. As you may know CORS is a browser thing, not a Swagger thing.
If you're referring to the Try-it-out feature of Swagger UI then CORS would need to be enabled on your API Server (or proxy), for those features that you'd like browser to be able to use. Alternatively if you're only interested in render SwaggerUI on different websites, then you should be able to get away with no CORS, or minimal configuration.
It is unfortunately a security you and your organization will need to decide on. If you enable CORS for all websites, it may be a security risk.
If you have question more related to Swagger, or if I've misunderstood feel free to shout.
A great resource for CORS is https://enable-cors.org/
Thanks a lot for the reply. I will describe more specifically on Friday as I currently have food poisoning. 🙂
Yes, I know CORS is a browser thing. Yes I am referring to "Try it out" feature of the Swagger UI. Currently I have few APIs on few servers. Each looks like t{1,2,3,4}.example.com/swagger. Inside vhost file config looks like
location /swagger {
root /home/deployuser;
}where inside /home/deployuser is "swagger" directory deployed plain old html/css/js method described in the docs. Of course it works.
But now I my goal is different approach. I have an application based on "Sinatra" which includes Swagger UI (the same files like from "plain on deployment method"). This app is available under, lets say, docs.swagger.example.com. When I open docs.swagger.example.com and put credentials to authenticate Swagger UI opens. Then I can choose to which API (t{1,2,3,4}.example.com/api) I would like to send request. Here the problem with CORS appears. Nginx config of the docs.swagger.example.com: https://pastebin.com/0mpf7ve7. I tried to add the line --> add_header Access-Control-Allow-Origin "https://docs.swagger.example.com"; to the nginx config files of the t{1,2,3,4}.example.com APIs. It does not help. 😕
I stucked. Is it possible to resolve it on the server docs.swagger.example.com side like docs https://swagger.io/docs/open-source-tools/swagger-ui/usage/cors/ says in the point 2 - quote "The application is located behind a proxy that enables the required CORS headers."?
ponelat Generally speaking which headers should I add to nginx config of the docs.swagger.example.com to resolve the cors issue?
PS
I tried many different configs found on the Internet but ..., among others below config which looks the best for me:
add_header Access-Control-Allow-Origin "*";
if ($http_origin ~* "^https://(t1.example.com|www.t1.example.com|t2.example.com|www.t2.example.com|and-so-on)$") {
add_header Access-Control-Allow-Origin "$http_origin";
}Hey 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!
I try this approach and let you know for 100%! 🙂
