JS请求拦截与修改方法解析

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);
};

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; // 原始响应仍正常返回
  });
};

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;
  }
});