Why flasgger is working with localhost but not with my deployed server?

Question

I am using a python flask app and for API documentation using flasgger. When I run my flask app locally http://localhost:8086/swagger/ I am getting the swagger UI properly.

Now we have deployed our application with an Nginx front-facing service. When we call the deployed link http://localhost:8086/api/core/swagger/ we are presented with a blank white page with Powered by Flasgger 0.9.5 on the top right part of the page.

In the web developer tools console, I am getting this error.

Uncaught ReferenceError: SwaggerUIBundle is not defined
    at window.onload ((index):72:16)

I understand this may be some issue with flasgger trying to load the CSS files or other resources and it is not rendering properly. Because of some path

During my configuration of the swagger, I am having the following configuration function for it.

def configure_swagger(app):
    

    swagger_config = {
        "headers": [],
        "specs": [
            {
                "endpoint": "apispec_1",
                "route": "apispec_1.json",
                "rule_filter": lambda rule: True,  # all in
                "model_filter": lambda tag: True,  # all in
            }
        ],
        "static_url_path": "/flasgger_static",
        "swagger_ui": True,
        "specs_route": "/swagger/",
        'openapi': '3.0.3'
    }
 
    swagger_template = {
        'components': {
            'securitySchemes': {
                'bearerAuth': {
                    'type': 'http',
                    'scheme': 'bearer',
                    'bearerFormat': 'JWT'
                }
            },
            'security': [{
                'bearerAuth': []
            }]
        }
    }
    swagger = Swagger(app, config=swagger_config, template=swagger_template)

and all my other endpoint in the api.py is following this architecture.

@api.route("/hello")
@swag_from("Swagger/hello.yml")
# @log_writer
def hello():
    projects = {"id": 1, "title": "Hello"}
    return projects["title"]


@api.route("/healtz")
@swag_from("Swagger/healtz.yml")
def healtz():
    return_dict = {"App Version": "1.0.0", "Status": "Healthy"}
    return return_dict

Sample of my healtz.yaml file:

summary: "Upload"
description: "Give the info in json"
consumes:
- "application/json"
produces:
- "application/json"
responses:
  405:
    description: "Invalid input"
security:
- bearerAuth: []

This YAML file is inside the project with a directory named Swagger.

I have gone through the following answers but did not get the answer.

• issue1
• issue2

For deployment, we are using the EKS service where we have our containers.

Why is this issue happening?. Can someone help me with the code?

Answer 1

The reason why this could be happening is that your URLs are being rewritten by NGINX when it gets forwarded to your Flask app. So, when your browser visits http://your-domain/api/core/swagger/, NGINX will forward to your Flask app as http://flask-app/swagger/. That said, Flasgger does not know that, and in its code, it hardcodes the URL as http://your-domain/swagger/, which obviously doesn't exist since NGINX does not route /swagger to your Flask app.

A potential solution can be seen here. Instead of querying the local version of the Swagger JS Library, you use external CDN hosted JS files to load the swagger webpage.