JavaScript拦截与修改网络请求方法

**JavaScript如何拦截和修改网络请求：实用技巧与最佳实践** 在JavaScript开发中，拦截和修改网络请求是常见的需求，尤其在调试、数据mock、以及实现特定安全策略时。本文深入探讨了JavaScript中实现网络请求拦截的三种主要方法：重写XMLHttpRequest的open和send方法、替换全局fetch方法，以及利用Service Worker。通过重写XHR和fetch，开发者可以添加自定义header，甚至修改响应数据。Service Worker则提供了更强大的全局拦截能力，适用于HTTPS环境下的所有网络请求。文章详细介绍了每种方法的实现代码和应用场景，并指出了各自的局限性，帮助开发者根据实际需求选择合适的拦截方案，提升Web应用的开发效率和用户体验。掌握这些技巧，能有效应对各种复杂的网络请求处理场景。

JavaScript中可通过重写XHR和fetch、使用Service Worker等方式实现请求拦截。1. 重写XMLHttpRequest的open和send方法可拦截请求并添加自定义头，onreadystatechange中可修改响应数据；2. 替换全局fetch方法可在请求前修改参数，并通过克隆响应修改返回内容；3. Service Worker通过监听fetch事件能全局拦截所有网络请求，适用于HTTPS环境下的全局控制；4. 各方法有局限：XHR/fetch重写仅影响JS发起的请求，无法拦截静态资源，且DevTools显示原始数据，第三方库可能绕过拦截。根据场景选择合适方式：调试用重写，生产环境推荐Service Worker。

JavaScript 中可以通过多种方式实现网络请求的拦截和修改，主要手段包括重写原生方法、使用代理工具（如浏览器开发者工具或 Charles）、以及现代浏览器支持的 Service Worker 和 Fetch/XHR 拦截。以下介绍几种实用的方法。

1. 拦截并修改 XMLHttpRequest 请求

例如，拦截所有 XHR 请求的 URL 并添加自定义请求头：

(function() {
  const originalOpen = XMLHttpRequest.prototype.open;
  const originalSend = XMLHttpRequest.prototype.send;

  XMLHttpRequest.prototype.open = function(method, url, ...args) {
    // 修改请求地址或记录日志
    if (url.includes('/api/')) {
      console.log('Intercepted XHR request to:', url);
    }
    this._isApiRequest = url.includes('/api/');
    return originalOpen.apply(this, [method, url, ...args]);
  };

  XMLHttpRequest.prototype.send = function(...args) {
    // 添加自定义请求头
    if (this._isApiRequest) {
      this.setRequestHeader('X-Intercepted', 'true');
    }
    return originalSend.apply(this, args);
  };
})();

你也可以在 onreadystatechange 中拦截响应数据并修改：

const originalSetOnReadyStateChange = XMLHttpRequest.prototype.onreadystatechange;
XMLHttpRequest.prototype.onreadystatechange = function(...args) {
  if (this.readyState === 4 && this._isApiRequest) {
    // 修改响应文本（需配合 responseText setter）
    const oldResponse = this.responseText;
    Object.defineProperty(this, 'responseText', {
      value: oldResponse.replace(/"name":"(.+?)"/, '"name":"[REDACTED]"'),
      writable: false
    });
  }
  if (originalSetOnReadyStateChange) {
    originalSetOnReadyStateChange.apply(this, args);
  }
};

2. 拦截 fetch 请求

示例：拦截 fetch 请求，添加 header 并修改返回结果：

const originalFetch = window.fetch;
window.fetch = function(resource, options) {
  // 修改请求选项
  const newOptions = {
    ...options,
    headers: {
      ...(options?.headers || {}),
      'X-Intercepted': 'true'
    }
  };

  // 输出请求信息
  console.log('Fetching:', resource);

  // 调用原始 fetch，并处理返回的 Response
  return originalFetch(resource, newOptions).then(response => {
    // 深克隆响应以便修改
    const cloned = response.clone();
    return cloned.text().then(body => {
      // 修改响应内容（仅影响 JS 获取的内容，不改变实际网络传输）
      const modifiedBody = body.replace(/"email":"[^"]*"/, '"email":"[HIDDEN]"');

      return response; // 正常返回原响应
      // 若需返回伪造响应，可构造新的 Response
      // return new Response(modifiedBody, { status: response.status, statusText: response.statusText, headers: response.headers });
    });
  });
};

3. 使用 Service Worker 拦截所有网络请求

注册 Service Worker：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(() => {
    console.log('Service Worker 注册成功');
  });
}

在 sw.js 中监听 fetch 事件：

self.addEventListener('fetch', event => {
  const { request } = event;

  // 只拦截 API 请求
  if (request.url.includes('/api/')) {
    event.respondWith(
      fetch(request).then(response => {
        // 克隆响应
        const cloned = response.clone();
        return cloned.json().then(data => {
          // 修改返回数据
          if (data.user) {
            data.user.email = 'hidden@example.com';
          }
          return new Response(JSON.stringify(data), {
            status: response.status,
            statusText: response.statusText,
            headers: response.headers
          });
        });
      }).catch(() => {
        return new Response(JSON.stringify({ error: 'Modified fallback' }), {
          status: 200,
          headers: { 'Content-Type': 'application/json' }
        });
      })
    );
  } else {
    event.respondWith(fetch(request));
  }
});

4. 注意事项与限制

• 重写 XHR/fetch 仅对页面内 JS 有效，无法拦截静态资源
• Service Worker 功能强大，但必须运行在 HTTPS 或 localhost 下
• 修改响应内容时，只能影响 JS 层获取的数据，浏览器 DevTools 显示的仍是原始内容
• 某些第三方库可能使用独立的 HTTP 客户端，绕过全局 fetch/XHR

基本上就这些。选择哪种方式取决于你的目标场景：调试可用 XHR/fetch 重写，生产级全局控制建议用 Service Worker。

理论要掌握，实操不能落！以上关于《JavaScript拦截与修改网络请求方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！