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.

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.

• javascript
• spring
• spring-boot
• nginx
• swagger

Share Improve this question Follow edited Apr 13, 2023 at 9:45 rMonteiro 1,70611 gold badge1717 silver badges4242 bronze badges asked Mar 24, 2023 at 21:20 clsbartekclsbartek 20611 gold badge44 silver badges2121 bronze badges 1

• You need to define the base URL in the Swagger configurations like so stackoverflow./questions/52321450/… – Vishnudev Krishnadas Commented Apr 12, 2023 at 9:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

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/#how-can-i-deploy-springdoc-openapi-ui-behind-a-reverse-proxy

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.