Forum Discussion

Newbie1's avatar
Newbie1
Occasional Contributor
3 years ago

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 vhost file: https://pastebin.com/KXTv7CBm  I am using. The commented out location block was my second attempt. After that I already started combining with different configurations from the net, but with no effect.

PS
I wonder if it is possible to make proxy + cors configured on swagger.example.com in such a way, that I do not have to add:
add_header Access-Control-Allow-Origin "https://swagger.example.com";
on every server which will use swagger available under swagger.example.com. Do any of you guys have any ideas?
Swagger UI
  • ponelat's avatar
    ponelat
    Staff
    3 years ago

    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/

    • Newbie1's avatar
      Newbie1
      Occasional Contributor
      3 years ago

      Thanks a lot for the reply. I will describe more specifically on Friday as I currently have food poisoning. 🙂

    • Newbie1's avatar
      Newbie1
      Occasional Contributor
      3 years ago

      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";
      }

      • ponelat's avatar
        ponelat
        Staff
        3 years ago

        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!