Question 53458 in Javascript Question posted in
A very good W3school tutorial can be found here.

Spring Boot Swagger through Nginx does not work correctly – Javascript

I have configured two services running in separate containers through nginx. Nginx configuration:

server {
    listen 8080;

    location /template-order-service/ {
        proxy_pass_request_headers on;
        proxy_set_header Host $host;

        proxy_pass http://template-order-service:8082/;
    }

    location /template-product-service/ {
        proxy_pass_request_headers on;
        proxy_set_header Host $host;

        proxy_pass http://template-product-service:8083/;
    }

}

I am able to call both services as exptected, using:

http://localhost/template-order-service/<endpoint>
http://localhost/template-product-service/<endpoint>

However when I am trying to reach swagger i am getting

Failed to load remote configuration.

In debugger console I see error like this:

http://localhost/v3/api-docs/swagger-config 404 Not Found

I am sure that this url should be:

http://localhost/template-order-service/v3/api-docs/swagger-config

or

http://localhost/template-product-service/v3/api-docs/swagger-config

How can I fix that in swagger ? In .js file I see some configUrl variable but I don’t know how to overwrite it. Simple query param (?configUrl=/template-order-service/v3/api-docs/swagger-config) does not work.

Tags:

2

Answers


  1. 0

    I think X-Forwarded- headers should help you.
    Namely X-Forwarded-Prefix to set context path for swagger-ui.

    Try this nginx config:

    server {
    listen 8080;

    location /template-order-service/ {
        proxy_pass_request_headers on;
        proxy_set_header Host $host;
        
        proxy_set_header X-Forwarded-Prefix '/template-order-service';

        proxy_pass http://template-order-service:8082/;
    }

    location /template-product-service/ {
        proxy_pass_request_headers on;
        proxy_set_header Host $host;
        
        proxy_set_header X-Forwarded-Prefix '/template-product-service';

        proxy_pass http://template-product-service:8083/;
    }

}

    You might also need to set property for spring boot app: server.forward-headers-strategy=framework

    After that you should be able to open swagger-ui at http://localhost(or where your nginx is)/template-order-service/swagger-ui/index.html and
    http://localhost/template-product-service//swagger-ui/index.html

    You can check more documentation and other headers to modify URL here:
    https://springdoc.org/#how-can-i-deploy-springdoc-openapi-ui-behind-a-reverse-proxy

    Login or Signup to reply.
  2. 0

    You can try yo to update the Swagger UI configuration in your index.html file to use the reverse proxy setup:

    const ui = SwaggerUIBundle({
  url: "http://localhost/v3/api-docs", // Update this to your desired URL
  dom_id: "#swagger-ui",
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  layout: "StandaloneLayout"
})

    Update the url property to the correct API documentation URL based on your reverse proxy configuration. For example, if you want to load the API documentation for the template-order-service, set the url property:

    url: "http://localhost/template-order-service/v3/api-docs",

    Similarly, for the template-product-service, set the url property like this:

    url: "http://localhost/template-product-service/v3/api-docs",

    Save the changes and reload the Swagger UI page. The API documentation should now be loaded correctly for the respective services.

    If you want to have both services available in the same Swagger UI, you might consider using a dropdown or a selection option to switch between different API documentation URLs. Then, update the url property based on the selected service.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search