'SwaggerUIBundle : Specify base url

I need to test a api where :


API Url	http://api.mydomain.loc:20109/v1/
API Definition URL	http://api.mydomain.loc:20109/v1/swagger/swagger.json

The API definition is :

{
  "openapi": "3.0.1",
  "info": {
    "title": "***",
    "description": "***",
    "version": "v1"
  },
  "servers": [
    {
      "url": "/v1/path1/path2"
    }
  ],
  "/ressource1": {
      "get": {
        "responses": {
          "200": {
            "description": "Success"
          }
        }
      }
    },
  ...
}

I follow this part unpkg in the documentation to start a local Swagger UI. I create the file "swagger-ui.html" with this content :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta
    name="description"
    content="SwaggerIU"
  />
  <title>SwaggerUI</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js" crossorigin></script>
<script>
  window.onload = () => {
    window.ui = SwaggerUIBundle({
      url: 'http://api.mydomain.loc:20109/v1/swagger/swagger.json',
      dom_id: '#swagger-ui',
    });
  };
</script>
</body>
</html>

When I open the page, the API definition is correctly loaded and Swagger UI displayed. But when I try out the endpoint "ressource1", Swagger UI call "http://api.mydomain.loc:20109/v1/path1/path2/ressource1". In my case, I want to call "http://api.mydomain.loc:20109/v1/ressource1".

How override the base path in Swagger UI with unpkg?

swagger-ui

Solution 1:^[1]

Swagger UI has the parameter spec :

spec : A JavaScript object describing the OpenAPI definition. When used, the url parameter will not be parsed. This is useful for testing manually-generated definitions without hosting them.

The solution is to load manually the api definition, edit the definition and pass the edited definition to Swagger UI :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta
    name="description"
    content="SwaggerIU"
  />
  <title>SwaggerUI</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js" crossorigin></script>
<script>
  const swaggerUrl = "http://api.mydomain.loc:20109/v1/swagger/swagger.json"
  const apiUrl = "http://api.mydomain.loc:20109/v1/"
  window.onload = () => {
    let swaggerJson = fetch(swaggerUrl).then(r => r.json().then(j => {
      console.log('\nREQUEST 2',j)
      j.servers[0].url = apiUrl;
      window.ui = SwaggerUIBundle({
        spec: j,
        dom_id: '#swagger-ui',
      });
    }));
  };
</script>
</body>
</html>

You can copy this code and just edit the value in swaggerUrl and apiUrl.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	vernou

'SwaggerUIBundle : Specify base url

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]