如何在SwaggerUI中为API请求添加HTTP请求头（无需改后端）

我有一个可生成API对应Swagger JSON的Web后端，当前通过以下HTML和JavaScript代码生成SwaggerUI页面：

<div id="swagger-ui"></div>

<script src="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-bundle.js" crossorigin></script>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui.css" />

window.ui = SwaggerUIBundle({
  url: '/api-docs',
  dom_id: '#swagger-ui',
});

我正在使用SSO解决方案，需要将一个token变量通过HTTP请求头传递给API。尝试过以下代码但请求并未被拦截：

self.addEventListener("fetch", (event) => {

if (event.request.url.includes('/api'){
    var newRequest = new Request(event.request, {
        mode: "cors",
        headers: {
            "Accept" : "application/json",
            "Authorization" : "Bearer " + token
        }
    });
    event.respondWith(fetch(newRequest));
}

需要优先选择无需修改后端（及Swagger JSON文件）的解决方法。

方案1：利用Swagger UI原生请求拦截器 #

这是最直接的方案，不需要额外依赖Service Worker，完全通过Swagger UI自带配置实现：

window.ui = SwaggerUIBundle({
  url: '/api-docs',
  dom_id: '#swagger-ui',
  // 添加请求拦截逻辑，自动给所有API请求注入Authorization头
  requestInterceptor: (request) => {
    request.headers.Authorization = `Bearer ${token}`;
    return request;
  }
});

该配置会拦截Swagger UI发起的所有API测试请求，自动在请求头中加入token，无需修改后端或Swagger JSON文件。

方案2：修复Service Worker实现 #

如果坚持使用Service Worker，需要先修正原代码的语法错误并完善逻辑：

1. 修正Service Worker代码：

self.addEventListener("fetch", (event) => {
  // 补全条件判断的闭合括号，同时保留原请求的mode避免跨域问题
  if (event.request.url.includes('/api')) {
    const newHeaders = new Headers(event.request.headers);
    // 在原有请求头基础上添加Authorization，避免覆盖默认头
    newHeaders.set('Authorization', `Bearer ${token}`);
    newHeaders.set('Accept', 'application/json');

    const newRequest = new Request(event.request, {
      headers: newHeaders,
      mode: event.request.mode
    });
    event.respondWith(fetch(newRequest));
  }
});

2. 在主页面中注册Service Worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js'); // 替换为你的Service Worker文件路径
    } catch (error) {
      console.error('Service Worker注册失败:', error);
    }
  });
}

注意：Service Worker仅在HTTPS环境（或localhost）下生效，且需要确保token能被Service Worker访问（可通过postMessage传递）。

方案3：全局预设请求头 #

通过Swagger UI的headers配置项给所有请求预设头：

window.ui = SwaggerUIBundle({
  url: '/api-docs',
  dom_id: '#swagger-ui',
  // 给所有请求（包括获取Swagger JSON的请求）添加Authorization头
  headers: {
    Authorization: `Bearer ${token}`
  }
});

如果不需要给/api-docs请求加头，建议优先使用方案1的requestInterceptor，灵活性更高。

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