JavaScript网络请求拦截与修改-js教程-PHP中文网

JavaScript网络请求拦截与修改

狼影

发布： 2025-11-17 23:13:02

原创

417人浏览过

通过重写 XMLHttpRequest 的 open 和 send 方法可拦截 AJAX 请求，添加认证头、修改请求体或响应数据。2. 拦截 fetch 需替换全局方法，可在请求前修改参数，响应后处理数据。3. 使用 Proxy 可实现动态、可配置的请求拦截。4. 注意拦截仅能包裹行为，存在兼容性与调试风险，生产环境慎用。

javascript网络请求拦截与修改

在现代前端开发中，JavaScript网络请求的拦截与修改是一项实用技术，常用于调试、模拟接口、性能监控或安全校验。虽然浏览器原生不提供直接的“拦截”API，但可以通过覆盖全局对象方法来实现对网络请求的控制。

1. 拦截 XMLHttpRequest 请求

XMLHttpRequest 是传统 AJAX 请求的核心对象。通过重写其关键方法，可以在请求发出前或响应返回后插入自定义逻辑。

以下是一个简单的拦截示例：

const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;

// 重写 open 方法，保存请求配置
XMLHttpRequest.prototype.open = function(method, url, ...args) {
  this._url = url;
  this._method = method;
  return originalOpen.apply(this, args);
};

// 重写 send 方法，可在发送前修改数据或添加头信息
XMLHttpRequest.prototype.send = function(body) {
  // 示例：统一添加认证头
  this.setRequestHeader('Authorization', 'Bearer token123');

  // 示例：修改请求体（如 JSON 数据）
  if (typeof body === 'string' && body.includes('sensitive')) {
    body = body.replace('sensitive', 'filtered');
  }

  // 请求完成后的拦截
  this.addEventListener('load', function() {
    if (this._url.includes('/api/user')) {
      console.log('用户数据请求完成，响应：', this.responseText);
      // 可在此修改 responseText（需用 defineProperty）
      const originalResponse = this.responseText;
      Object.defineProperty(this, 'responseText', {
        value: originalResponse.replace('"admin":true', '"admin":false')
      });
    }
  });

  return originalSend.call(this, body);
};

登录后复制

2. 拦截 fetch 请求

fetch 是基于 Promise 的现代请求方式，拦截方式不同于 XMLHttpRequest。我们可以通过替换全局 fetch 来实现拦截。

立即学习“Java免费学习笔记（深入）”；

图改改

在线修改图片文字

455

查看详情

const originalFetch = window.fetch;

window.fetch = function(resource, options) {
  // 请求前：修改 headers 或 body
  const newOptions = {
    ...options,
    headers: {
      ...options?.headers,
      'Authorization': 'Bearer token123'
    }
  };

  // 示例：对特定接口修改请求体
  if (resource.includes('/api/submit')) {
    const originalBody = newOptions.body;
    if (originalBody && typeof originalBody === 'string') {
      newOptions.body = originalBody.replace('realname', 'anonymous');
    }
  }

  // 返回包装后的 Promise，可处理响应
  return originalFetch(resource, newOptions).then(response => {
    // 克隆响应以便修改
    const cloned = response.clone();
    
    if (resource.includes('/api/profile')) {
      // 示例：修改返回的 JSON 数据
      cloned.json().then(data => {
        if (data.isAdmin) {
          console.warn('检测到管理员权限，前端已屏蔽');
          // 注意：这里不能直接修改原始响应，只能影响后续使用
        }
      });
    }

    return response; // 原始响应仍正常返回
  });
};

登录后复制

3. 使用 Proxy 实现更精细控制

若需动态开启/关闭拦截，或针对不同环境做处理，可用 Proxy 包装请求对象，实现更灵活的管理。

例如，封装一个可配置的 fetch 代理：

function createFetchProxy(config) {
  return new Proxy(window.fetch, {
    apply(target, thisArg, argumentsList) {
      let [resource, options] = argumentsList;

      if (config.modifyRequest) {
        options = config.modifyRequest(options, resource);
      }

      return target.apply(thisArg, [resource, options]).then(response => {
        if (config.interceptResponse) {
          return config.interceptResponse(response, resource);
        }
        return response;
      });
    }
  });
}

// 使用示例
window.fetch = createFetchProxy({
  modifyRequest(options) {
    options.headers['X-Debug'] = 'true';
    return options;
  },
  interceptResponse(response) {
    console.log(`请求 ${response.url} 状态：${response.status}`);
    return response;
  }
});

登录后复制