如何通过Kong声明式配置（YAML）路由`http://localhost:port/swagger-ui/index.html`路径？Swagger UI路由后页面空白问题求助

我来帮你搞定这个问题——Swagger UI页面空白的核心原因就是静态资源（CSS、JS、图标等）的路径被Kong路由改写后无法正确匹配上游服务，你的两种配置都没覆盖到所有资源的路由映射，下面给你一步步排查并给出正确配置：

先说说你之前配置的问题 #

方案一的问题 #

你只给/swagger-ui/index.html做了路由映射，但Swagger UI加载页面时还会请求/swagger-ui/css/xxx.css、/swagger-ui/js/xxx.js等静态资源，这些请求根本没被Kong转发到上游服务；而且strip_path: true会把外部访问的/swagger前缀去掉，导致浏览器发起的静态资源请求变成http://localhost:kong-port/css/xxx.css，完全找不到对应的资源。

方案二的问题 #

你用kong-plugin-url-rewrite的配置格式完全错误，插件需要的是正则匹配规则，不是随便写个http://swagger 8099 port这种无效值，自然起不到路径重写的作用。

正确的Kong声明式YAML配置（两种可行方案） #

方案一：用request-transformer插件重写路径 #

这个方案通过插件统一处理所有/swagger开头的请求，转发到上游的/swagger-ui路径下：

services:
- name: swagger-service
  host: host.docker.internal
  port: 8099

routes:
- name: swagger-route
  paths:
  - /swagger  # 外部访问的前缀
  strip_path: false  # 保留前缀，交给插件重写
  plugins:
  - name: request-transformer
    config:
      replace:
        uri: "/swagger-ui${uri#/swagger}"  # 把/swagger开头的路径替换成/swagger-ui，比如/swagger/index.html → /swagger-ui/index.html

方案二：用kong-plugin-url-rewrite插件（正确配置） #

如果偏好url-rewrite插件，需要写正则规则匹配所有资源路径：

services:
- name: swagger-service
  host: host.docker.internal
  port: 8099

routes:
- name: swagger-route
  paths:
  - /swagger
  plugins:
  - name: kong-plugin-url-rewrite
    config:
      rules:
        - regex: ^/swagger(.*)$
          replacement: /swagger-ui$1
          condition:
            methods: ["GET", "HEAD"]  # 只针对GET/HEAD请求重写

额外优化：让Swagger UI自身适配路由前缀 #

为了彻底避免相对路径问题，建议修改Swagger UI的index.html，在SwaggerUIBundle配置里加上basePath，让页面内的所有资源请求自动带上/swagger前缀：

window.ui = SwaggerUIBundle({
  url: "你的API文档地址",
  dom_id: '#swagger-ui',
  basePath: "/swagger",  // 对应Kong的路由前缀
  deepLinking: true,
  // 其他原有配置...
});

这样配置后，访问http://localhost:kong-port/swagger/index.html就能正常加载Swagger UI页面，所有静态资源也能正确被Kong转发到上游服务了。

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