4

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.

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?

Danish Xavier
  • 1,225
  • 1
  • 10
  • 21
  • looks like some javascript files are not being loaded. This can be because of many things, but the most obvious one seems like one of either server not serving static files or the file being blocked because of cors or CSP. Can you verify if you have a console log that says it was unable to load a certain resource in the console? – Prasanna Mar 28 '22 at 21:40
  • Yes, I understand that but the JS file requested from the backend is giving `200` as the response. I actually think it's the Nginx routing issue and tried changing the routes. It still did not work. Flassger must be referring to some `host: port/swagger/` whereas my Nginx is adding `host: port/API/core/swagger` but I changed the path in the Nginx and no luck still. – Danish Xavier Mar 29 '22 at 07:04

1 Answers1

0

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.

choyiny
  • 226
  • 1
  • 4