title: swagger UI not reachable while running on Docker proxied through Nginx and hosted by gunicorn
body: <p>I have a Flask (with Flask-restplus) app running locally on port 5000. When I launch the app locally and go below URL I can see the Swagger UI.</p>
  
  <pre><code>  http://localhost:5000/api/#
  </code></pre>
  
  <p>But when I run it behind NGINX, gunicorn and go to</p>
  
  <pre><code>  http://localhost:81/api/#
  </code></pre>
  
  <p>I get below error</p>
  
  <pre><code>  Can't read from server. It may not have the appropriate access-control-origin settings.
  </code></pre>
  
  <p>When I look at the chrome error I see a request being made to <strong><a href="http://localhost/api/swagger.json" rel="nofollow noreferrer">http://localhost/api/swagger.json</a></strong> Colud this be the problem as the NGINX container is running on port 81?</p>
  
  <pre><code>    $(function () {
          window.swaggerUi = new SwaggerUi({
              url: "http://localhost/api/swagger.json",
              validatorUrl: "" || null,
              dom_id: "swagger-ui-container",
              supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
              onComplete: function(swaggerApi, swaggerUi){
              },
              onFailure: function(data) {
                  log("Unable to Load SwaggerUI");  // &lt;&lt;&lt;-- This is where it breaks
              },
          });
          window.swaggerUi.load();
  </code></pre>
  
  <p>However I am able to make a postman request to my through <a href="http://localhost:81/api/centres/1" rel="nofollow noreferrer">http://localhost:81/api/centres/1</a> and I get expected data</p>
  
  <p>After googling since last three days the options are:</p>
  
  <ul>
  <li>To send CORS headers on response. I dont prefer this as it is a security risk.</li>
  <li>To configure NGINX to redirect requests to correct url (<a href="http://flask.pocoo.org/snippets/35/" rel="nofollow noreferrer">http://flask.pocoo.org/snippets/35/</a>)</li>
  </ul>
  
  <p>This is what my server config looks like</p>
  
  <pre><code>  server {
       listen 81;
       charset utf-8;
  
       # Configure NGINX to reverse proxy HTTP requests to the upstream server 
        (Gunicorn (WSGI server))
       location / {
          # Define the location of the proxy server to send the request to
          proxy_pass http://web:8000;
          proxy_redirect http://localhost/api http://localhost:81/api;
  
          # Redefine the header fields that NGINX sends to the upstream server
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Scheme $scheme;
      }
    }
  </code></pre>
  
  <p>It still doesnt show me the swagger UI. I'm a newbie to this world of Docker, Nginx and gunicorn. How can fix this issue?</p>