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

【问题标题】：Changing swagger-ui server variable at runtime在运行时更改 swagger-ui 服务器变量
【发布时间】：2018-06-30 13:55:54
【问题描述】：

使用 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 事件，以更好地模拟用户如何更改字段。

有没有更招摇的方式通过公开的调用来改变这个值？我浏览过 window.ui，但它有点神秘。

【问题讨论】：

你想达到什么目的？您是否尝试自动测试 API 调用？
我有一个 api.yaml 文件托管在不同的物联网设备上。每个设备将根据其配置具有不同的主机名。加载页面时，我尝试使用 javascript 将“主机名”服务器变量设置为 window.location.hostname，例如通过 javascript。

标签： swagger-ui

【解决方案1】：

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

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

例如，如果你有

servers:
  - url: /api

API 定义文件位于

http://foobar/spec/api.yaml

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

http://foobar/api

【讨论】：

这适用于本地服务器版本。是否可以在运行时修改 url 条目？我正在考虑这样一种情况，我可能想让人们在一种情况下插入动态 url，但在另一种情况下使用这个简化的相对路径。我当然可以使用两个不同的 .yaml 文件，但在我的情况下，托管页面会知道它是在嵌入端还是在另一个 Web 案例中。
除非我误解了用例，否则您可以简单地将servers 与url: /api 和url: http://{hostname}/api 2 个项目一起使用（如您的原始示例），然后让用户选择他们想要的.
这几乎是用例。对于嵌入式方面，相对 /api 效果很好，谢谢！对于 Web 端，我可能希望将所有 Web 用户指向一个虚假的服务器端点，例如 sometest.server.com。我想我可以将该 url 放入 yams 文件中，但我希望能够使用托管页面进行设置，而无需两个 .yaml 文件或两个服务器条目，可能会混淆用户。因此网络主机可以运行一些 js 将服务器设置为 simetest.server.com 但嵌入式端将保留 /api。

【解决方案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)
                            }
                        }
                    }
                }
            }
        }
    ]
    // ...
})

【讨论】：

如果host和basePath是动态的，只需要在前端做一些修改即可。

【解决方案3】：

调整 answer from nevermind 以与 index.html from swagger-ui 中使用的 SwaggerUIBundle 一起使用：

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)
              }
            }
          }
        }
      }
    }
  }
],

这样 index.html 可以从后端服务本身提供，并且只会引用它自己的 url。

【讨论】：