如何利用J*aScript进行网络请求的拦截和修改？

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何利用J*aScript进行网络请求的拦截和修改？

2025-10-19

浏览次数：次

返回列表

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

如何利用javascript进行网络请求的拦截和修改？

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

1. 拦截并修改 XMLHttpRequest 请求

XMLHttpRequest（XHR）是传统 AJAX 请求的基础。通过重写 XHR 的关键方法，可以在发送前或响应后进行拦截和修改。

例如，拦截所有 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 是现代 Web 应用中常用的请求方式，基于 Promise。虽然不能直接“重写”其内部逻辑，但可以替换全局的 fetch 方法来实现拦截。

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

立即学习“J*a免费学习笔记（深入）”；

网络工作室整站 for Dedecms5.7 SP1

基于DEDECMS5.7 SP1制作的漂亮网络工作室整站源码，生成HTML文件。利于收录。整站采用黑色配色，彰显大气。目前仅添加新闻，案例栏目。其他类别请自行在后台添加，并修改首页模板的调用。安装方法：1.访问：域名/install 按照提示进行安装.2.完成后登陆网站后台---还原数据库3.系统设置---修改网址和网站名称.4.生成整站,后台信息：dede后台用户名：admin后台密码：www

0 查看详情网络工作室整站 for Dedecms5.7 SP1

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 运行在浏览器后台，能真正拦截页面发出的所有网络请求（包括 HTML、CSS、JS、API 等），适合全局控制。

if ('serviceWorker' in n*igator) {
  n*igator.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));
  }
});