如何在Swagger UI中显示当前URL？

不用愁，完全可以实现动态获取当前页面的主机名和路径，不用硬编码！下面给你几种靠谱的方法：

方法1：在Swagger UI初始化时动态设置URL #

如果是你自己初始化Swagger UI（比如在HTML页面里），可以直接用JavaScript获取当前页面的window.location来动态拼接API文档的URL，同时修改Swagger UI显示的服务器地址：

<script>
// 获取当前页面的主机地址（包含协议、域名、端口）
const currentHost = window.location.origin;
// 假设你的OpenAPI文档在当前域名下的 /openapi.json 路径
const openApiUrl = `${currentHost}/openapi.json`;

// 初始化Swagger UI
window.onload = function() {
  const ui = SwaggerUIBundle({
    url: openApiUrl,
    dom_id: '#swagger-ui',
    // 其他配置...
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ]
  });

  // 动态修改OpenAPI文档的servers字段，让Swagger UI顶部显示当前主机地址
  ui.spec.servers = [{ url: currentHost }];
  ui.updateSpec(ui.spec);
};
</script>

这样操作后，Swagger UI不仅会加载当前域名下的OpenAPI文档，顶部显示的服务器地址也会和浏览器地址栏的主机信息保持一致。

方法2：在OpenAPI定义中用变量+Swagger UI动态替换 #

如果你的OpenAPI文档（yaml/json）里已经用了变量占位符，比如：

openapi: 3.0.0
servers:
  - url: "{protocol}://{hostname}"
    variables:
      protocol:
        default: https
      hostname:
        default: example.com

那你可以在Swagger UI初始化时，直接用当前页面的信息替换这些变量：

window.onload = function() {
  const ui = SwaggerUIBundle({
    url: '/openapi.yaml',
    dom_id: '#swagger-ui',
    // 动态替换变量为当前页面的对应值
    variables: {
      hostname: window.location.host,
      protocol: window.location.protocol.slice(0, -1) // 去掉协议末尾的冒号
    },
    // 其他配置...
  });
};

这种方式适合已有固定OpenAPI文档但不想硬编码主机名的场景，Swagger UI会自动把变量替换成当前页面的真实值。

方法3：后端动态生成OpenAPI文档（有后端集成场景） #

如果你的Swagger UI是和后端框架集成的（比如Spring Boot + SpringDoc、Node.js + swagger-jsdoc），可以让后端在生成OpenAPI文档时，直接获取当前请求的主机信息，动态填充servers字段的URL值。

比如Spring Boot中用SpringDoc的话，可以自定义一个配置类：

@Component
public class DynamicServerUrlCustomiser implements OpenApiCustomiser {

    @Override
    public void customise(OpenAPI openApi) {
        // 从请求上下文获取当前的协议、域名、端口和上下文路径
        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        if (attributes != null) {
            HttpServletRequest request = attributes.getRequest();
            String currentUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
            openApi.setServers(List.of(new Server().url(currentUrl)));
        }
    }
}

这样后端返回的OpenAPI文档里的服务器地址就是当前请求的真实主机地址，Swagger UI自然会显示正确的URL。

内容的提问来源于stack exchange，提问作者pink_panda