如何拦截JS代码发起的HTTP资源请求并修改请求头？

针对你需要拦截所有JS发起的HTTP资源请求并添加认证头的需求，以下是几种实用方案：

1. 拦截Fetch API请求 #

现代JS大量使用Fetch发起请求，直接重写全局fetch方法即可拦截：

const originalFetch = window.fetch;
window.fetch = function(resource, options = {}) {
  // 注入认证头，保留原有请求头
  options.headers = Object.assign({}, options.headers, {
    'Authorization': 'Bearer YOUR_AUTH_TOKEN'
  });
  return originalFetch(resource, options);
};

该方案能覆盖所有通过Fetch发起的脚本、数据等请求。

2. Service Worker（最全面的拦截方案） #

Service Worker 可以拦截页面所有网络请求，包括XMLHttpRequest、Fetch、页面加载的脚本/样式/图片等资源，是覆盖范围最广的方案：

第一步：注册Service Worker #

在主页面代码中添加注册逻辑：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
    } catch (err) {
      console.error('Service Worker 注册失败:', err);
    }
  });
}

第二步：编写Service Worker脚本（sw.js） #

self.addEventListener('fetch', (event) => {
  const req = event.request;
  // 跳过浏览器扩展等非业务请求，可按需调整过滤规则
  if (req.url.startsWith('chrome-extension://')) return;

  // 构造带认证头的新请求
  const modifiedHeaders = new Headers(req.headers);
  modifiedHeaders.set('Authorization', 'Bearer YOUR_AUTH_TOKEN');

  const modifiedReq = new Request(req, { headers: modifiedHeaders });
  event.respondWith(fetch(modifiedReq));
});

3. 拦截动态创建的资源标签（备选方案） #

如果是通过JS动态创建script/link/img等标签发起的请求，除了Service Worker，也可以重写DOM方法拦截，但复杂度较高，仅作备选：

const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
  const elem = originalCreateElement.call(this, tagName);
  const targetTags = ['script', 'link', 'img'];
  if (targetTags.includes(tagName.toLowerCase())) {
    // 监听资源地址属性的设置
    const propName = tagName === 'link' ? 'href' : 'src';
    Object.defineProperty(elem, propName, {
      set: (value) => {
        // 通过Fetch带认证头获取资源，转为Blob URL后加载
        fetch(value, {
          headers: { 'Authorization': 'Bearer YOUR_AUTH_TOKEN' }
        })
        .then(res => res.blob())
        .then(blob => {
          const blobUrl = URL.createObjectURL(blob);
          elem[propName] = blobUrl;
        });
        return value;
      }
    });
  }
  return elem;
};

关键注意事项 #

• CORS配置：确保目标服务器的Access-Control-Allow-Headers包含Authorization，否则跨域请求会失败。
• Service Worker环境：生产环境需要HTTPS（localhost开发环境不受限制）。
• 令牌安全：避免在客户端硬编码敏感令牌，建议通过安全的方式获取并存储（如HttpOnly Cookie）。

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