在运行时更改 swagger-ui 服务器变量

Question

使用 openapi v3 配置，我有一个名为“主机名”的服务器变量，用于构建 url，例如：

...
servers:
- url: http://{hostname}/api
 variables:
  hostname:
   "default": "some default here"
....

在运行时，我希望能够更改“主机名”服务器变量。我在页面上找到了 UI 元素，

<input type="text" value="some default here" data-variable="hostname">

通过编辑输入字段更改变量工作正常，但通过 jQuery 更改输入字段不起作用，即使在设置值后触发“更改”事件时，扩展 api 部分之一时该值也会恢复。我还尝试触发 keyup/keydown 和 focusin/focusout 事件以更好地模拟用户如何更改字段。

是否有更 swagger-ui 方法来通过公开调用更改此值？我已经浏览了 window.ui 但它有点神秘。

Answer 1

我有一个 api.yaml 文件托管在不同的 IoT 设备上。每个设备将根据其配置具有不同的主机名。当页面加载时，我尝试使用 javascript 将“主机名”服务器变量设置为 window.location.hostname，例如通过 javascript。

您可以简单地指定一个相对服务器url——它将相对于 OpenAPI 定义文件的位置进行解析。

例如，如果你有

servers:
  - url: /api

API定义文件位于

http://foobar/spec/api.yaml

那么urlAPI 调用的基础将被解析为

http://foobar/api

Answer 2

您可以通过编写插件在渲染之前更改规范 json

const ui = SwaggerUI({
    // ...
    plugins: [
        // add a plugin to alter spec before it rendered
        {
            statePlugins: {
                spec: {
                    wrapActions: {
                        updateJsonSpec: function(oriAction, system) {
                            return (spec) => {
                                // change spec.servers here to add new entry, use concat to put it as the first & default one
                                spec.servers = [{url: someDynamicUrlInRuntime}].concat(spec.servers || [])
                                return oriAction(spec)
                            }
                        }
                    }
                }
            }
        }
    ]
    // ...
})

Answer 3

Adapting the answer from nevermind for use with SwaggerUIBundle as used in the index.html from swagger-ui:

plugins: [
  SwaggerUIBundle.plugins.DownloadUrl,

  // Custom plugin that replaces the server list with the current url
  function() {
    return {
      statePlugins: {
        spec: {
          wrapActions: {
            updateJsonSpec: function(oriAction, system) {
              return (spec) => {
                    spec.servers = [{url: window.location.origin}]
                    return oriAction(spec)
              }
            }
          }
        }
      }
    }
  }
],

This way the index.html can be served from the backend service itself and will refer only on its own url.