如何使用JavaScript拦截HTTP请求？拦截特定统计上报请求咨询

嗨，我来帮你搞定这两个问题！下面分情况给你详细说明：

在浏览器环境里，主要有三种常用的方式来拦截HTTP请求，每种适用场景略有不同：

1. 拦截XMLHttpRequest请求 #

很多老项目或者一些库还在使用XMLHttpRequest，咱们可以通过重写它的核心方法来实现拦截：

// 先保存原始的XMLHttpRequest方法，避免覆盖后无法调用原生逻辑
const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.open = function(method, url) {
  // 拦截请求发起前：可以记录请求信息，甚至修改url、请求方法
  console.log(`即将发送${method}请求到: ${url}`);
  // 调用原生方法继续执行请求流程
  return originalOpen.apply(this, arguments);
};

XMLHttpRequest.prototype.send = function(body) {
  // 可以在这里监听请求完成事件，或者修改请求体
  this.addEventListener('load', () => {
    console.log(`请求完成，响应状态: ${this.status}`);
    // 如果你想修改响应内容，也可以在这里操作
    // this.responseText = "被修改后的响应内容";
  });
  return originalSend.apply(this, arguments);
};

2. 拦截fetch请求 #

现代浏览器和新项目大多用fetch发起请求，咱们可以直接重写window.fetch方法来拦截：

const originalFetch = window.fetch;

window.fetch = async function(resource, options) {
  // 拦截请求前：可以修改请求目标URL或者配置参数
  console.log(`Fetch请求目标: ${resource}`);
  
  // 这里可以提前加判断，直接拦截特定请求
  if (resource.includes('/stats')) {
    // 比如返回一个模拟的成功响应，替代真实请求
    return new Response(JSON.stringify({data: "拦截后的模拟统计数据"}), {
      status: 200,
      headers: {'Content-Type': 'application/json'}
    });
  }

  // 调用原生fetch获取真实响应
  const response = await originalFetch(resource, options);

  // 拦截响应后：可以读取并修改响应内容
  const responseClone = response.clone(); // 响应只能读取一次，所以先克隆
  const data = await responseClone.json();
  console.log('响应原始数据:', data);
  // 如果需要修改响应，重新构造Response对象即可
  // const modifiedResponse = new Response(JSON.stringify({...data, isModified: true}), response);
  // return modifiedResponse;

  return response;
};

3. 使用Service Worker拦截请求 #

如果你的网页是PWA，或者需要在后台长期拦截请求（比如页面关闭后仍生效），Service Worker是更合适的选择，它能在页面上下文之外拦截所有请求：

// 这段代码要写在Service Worker文件中（比如sw.js）
self.addEventListener('fetch', (event) => {
  const request = event.request;
  console.log(`Service Worker拦截到请求: ${request.url}`);

  // 匹配到目标请求后，自定义响应
  if (request.url.includes('/stats')) {
    event.respondWith(
      new Response(JSON.stringify({message: "统计请求已被拦截"}), {
        status: 200,
        headers: {'Content-Type': 'application/json'}
      })
    );
    return;
  }

  // 其他请求正常放行
  event.respondWith(fetch(request));
});

注意：Service Worker需要页面在HTTPS环境下（localhost开发环境除外），并且需要先在主页面注册才能生效。

当然可以！核心逻辑就是在拦截过程中增加判断条件，精准匹配统计请求的特征。常见的匹配维度有这些：

• 匹配请求URL：比如统计请求通常包含/analytics、/stats、/track这类关键词
• 匹配请求方法：比如统计请求大多是POST类型
• 匹配请求体：比如请求体里包含eventName、userID这类统计相关字段
• 匹配请求头：比如有些统计请求会携带特定的自定义头（如X-Statistics-Token）

举个具体的实战例子：假设你的统计请求是POST到https://your-site.com/api/stats，请求体是{event: "page_view", user_id: "123"}，用fetch拦截可以这么写：

const originalFetch = window.fetch;

window.fetch = async function(resource, options) {
  // 先匹配URL和请求方法
  if (resource === 'https://your-site.com/api/stats' && options?.method === 'POST') {
    // 读取并解析请求体
    const requestBody = await options?.body?.text();
    if (requestBody) {
      const bodyData = JSON.parse(requestBody);
      // 再匹配请求体里的统计事件类型
      if (bodyData.event === 'page_view') {
        console.log('捕获到页面浏览统计请求，已拦截');
        // 返回模拟响应，不发送到真实服务器
        return new Response(JSON.stringify({code: 200, message: "统计请求已被拦截"}), {
          status: 200,
          headers: {'Content-Type': 'application/json'}
        });
      }
    }
  }

  // 非目标请求正常放行
  return originalFetch(resource, options);
};

如果是XMLHttpRequest类型的统计请求，逻辑类似——在open或send方法里判断URL、请求体即可实现精准拦截。

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