How can I fix swagger.json request blocked due to CORS with docker-compose/gunicorn/nginx stack?

[steg87]

I am trying to deploy a Flask REST app with Flask-RestX autogenerating Swagger UI for it. The development versions work fine on localhost, but I think something about the reverse proxy is throwing it.

I am getting the following error message when I try to access the Swagger API page in the docker-compose/gunicorn/nginx deployment;

"Failed to load API definition.

Errors

Fetch error NetworkError when attempting to fetch resource. http://127.0.0.1/swagger.json Fetch error Possible cross-origin (CORS) issue? The URL origin (http://127.0.0.1) does not match the page (http://127.0.0.1:4000). Check the server returns the correct 'Access-Control-Allow-*' headers."

I've recreated the error using the Flask-RestX Hello World Todo app, git@github.com:stevengillies87/flask-restx-docker-deploy.git

Since the error mentions CORS I tried adding the flask-cors package, which you can see on the flask-cors branch of the repo. It made no difference.

[steg87]

Issue was not to do with Flask-RestX, it was to do with my nginx.conf. The port was not being forwarded correctly, only the host.

I was using boilerplate
server {
listen 80;

location / {
    proxy_pass http://hello_flask;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
}

Needed to change proxy_set_header Host $host; to proxy_set_header Host $http_host;