SwaggerUI中fetch API遇Date禁止头：能否覆写或替换？

我正在基于文档创建OpenAPI文件，用SwaggerUI搭建API调试平台，但碰到了fetch API的限制：它会禁止设置某些请求头（比如Date），而我有个API调用必须携带Date请求头。

想请教：

• 能不能覆写fetch的这个限制？
• 有没有办法替换SwaggerUI内置的fetch API为其他兼容方案？

我查过相关信息，swagger-client库支持自定义fetch功能，但看起来没法和SwaggerUI结合使用。涉及的API是Websupport的v1 REST接口，要求必须带Date头。

1. 用XMLHttpRequest替换内置fetch（最直接的可行方案） #

浏览器的fetch API对Date这类头的限制是硬规则，没法直接覆写，但你可以替换SwaggerUI的底层请求实现——用XMLHttpRequest，它没有这类限制。

SwaggerUI v3.18及以上版本支持通过customFetch选项传入自定义请求函数，以下是封装好的XMLHttpRequest版本：

const customFetch = (url, options) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method, url);
    
    // 遍历并设置所有请求头，包括Date
    Object.entries(options.headers || {}).forEach(([key, value]) => {
      xhr.setRequestHeader(key, value);
    });
    
    xhr.onload = () => {
      resolve({
        ok: xhr.status >= 200 && xhr.status < 300,
        status: xhr.status,
        statusText: xhr.statusText,
        headers: new Headers(xhr.getAllResponseHeaders()),
        text: () => Promise.resolve(xhr.responseText),
        json: () => Promise.resolve(JSON.parse(xhr.responseText))
      });
    };
    
    xhr.onerror = () => reject(new Error('请求失败'));
    xhr.send(options.body);
  });
};

// 初始化SwaggerUI时传入自定义fetch
SwaggerUIBundle({
  url: "你的OpenAPI文件地址.yaml",
  dom_id: '#swagger-ui',
  customFetch: customFetch,
  // 其他原有配置...
});

2. 通过请求拦截器配合后端代理（适合有后端转发的场景） #

如果不想替换整个请求实现，可以在SwaggerUI里用requestInterceptor把Date头放到自定义的非限制头里，然后让后端代理把这个自定义头转成Date头：

SwaggerUIBundle({
  // 其他配置...
  requestInterceptor: (req) => {
    // 把Date值放到X-Custom-Date，后端接收后转换为Date头
    req.headers['X-Custom-Date'] = new Date().toUTCString();
    return req;
  }
});

注意：这个方法必须依赖后端配合转发，否则直接在前端设置Date头还是会被浏览器拦截。

3. 正确结合swagger-client的方式 #

你之前的误解在于，swagger-client完全可以和SwaggerUI结合使用——SwaggerUI内部本来就依赖swagger-client处理请求。你可以先初始化一个带自定义fetch的swagger-client实例，再传给SwaggerUI：

import SwaggerClient from 'swagger-client';
import SwaggerUIBundle from 'swagger-ui';

// 先初始化自定义的swagger-client
const customClient = await SwaggerClient({
  url: "你的OpenAPI文件地址.yaml",
  fetch: customFetch, // 这里用上面写的自定义fetch函数
});

// 把自定义实例传给SwaggerUI
SwaggerUIBundle({
  client: customClient,
  dom_id: '#swagger-ui',
  // 其他原有配置...
});

这样SwaggerUI就会使用你配置好的swagger-client，绕开fetch的头限制。

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