Spring Camel集成Swagger UI静态资源访问404引发空白页问题

问题根因 #

现有配置仅单独注册了/swagger/index.html单一路由，未对Swagger UI目录下的所有js、css、图片等静态资源做路由映射，浏览器发起静态资源请求时无对应路由处理，直接返回404，最终导致页面空白。

本地直接打开index.html可正常运行，是因为本地环境直接读取同目录的本地文件，不需要服务端路由转发，和项目运行时的服务请求逻辑完全不同。

具体配置调整 #

1. 补全静态资源的Camel路由映射 #

替换原来仅处理index.html的单独路由，新增通配规则匹配/swagger路径下的所有静态资源请求，同时根据文件后缀设置正确的响应Content-Type，避免浏览器MIME类型校验拦截：

rest("/swagger")
    // 匹配swagger路径下所有的GET静态资源请求
    .get("/*")
    .to("direct://get/swagger/resource");

from("direct://get/swagger/resource")
    .routeId("SwaggerStaticResourceRoute")
    // 提取请求路径对应的资源相对路径
    .setHeader("resourcePath", simple("${header.OperationPath}"))
    // 按文件后缀匹配正确的响应内容类型
    .choice()
        .when(header("resourcePath").endsWith(".js"))
            .setHeader("Content-Type", constant("application/javascript; charset=utf-8"))
        .when(header("resourcePath").endsWith(".css"))
            .setHeader("Content-Type", constant("text/css; charset=utf-8"))
        .when(header("resourcePath").endsWith(".png"))
            .setHeader("Content-Type", constant("image/png"))
        .when(header("resourcePath").endsWith(".html"))
            .setHeader("Content-Type", constant("text/html; charset=utf-8"))
        .otherwise()
            .setHeader("Content-Type", constant("application/octet-stream"))
    .end()
    // 从classpath的swagger目录读取对应资源文件
    .setBody().simple("resource:classpath:/swagger/${header.resourcePath}");

• 注意：需要确保所有Swagger UI dist下的资源文件（包括swagger-ui-bundle.js、swagger-ui-standalone-preset.js、swagger-ui.css、各尺寸favicon等全部文件）都放置在classpath的/swagger/目录下，保持和index.html的相对目录结构一致。

2. 修正index.html内的资源引用路径 #

移除原来的./相对路径前缀，所有静态资源引用统一使用/swagger/为前缀的绝对路径，避免路由路径解析错位：

<!-- 替换原来的相对路径引用 -->
<link rel="stylesheet" href="/swagger/swagger-ui.css" />
<script src="/swagger/swagger-ui-bundle.js" charset="UTF-8"></script>
<script src="/swagger/swagger-ui-standalone-preset.js" charset="UTF-8"></script>

• 如果项目配置了全局的上下文路径（比如服务部署在/app路径下），需要把上述引用路径替换为/app/swagger/xxx格式，保证路径和实际服务访问入口一致。

3. 调整Swagger UI的接口文档地址配置 #

把index.html内SwaggerUIBundle初始化的示例接口地址，替换为项目中已经验证可正常访问的接口文档地址：

window.onload = function() {
  const ui = SwaggerUIBundle({
    url: "/v2/api-docs", // 替换为项目实际的接口文档json地址
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  });
  window.ui = ui;
};

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