通过重写 XMLHttpRequest 的 open 和 send 方法可拦截 AJAX 请求，添加认证头、修改请求体或响应数据。2. 拦截 fetch 需替换全局方法，可在请求前修改参数，响应后处理数据。3. 使用 Proxy 可实现动态、可配置的请求拦截。4. 注意拦截仅能包裹行为，存在兼容性与调试风险，生产环境慎用。
在现代前端开发中，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免费学习笔记（深入）”；
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;
}
});
4. 注意事项与限制
拦截网络请求虽强大，但也存在一些限制和风险：
- 无法真正“阻止”原生行为，只能包裹或修改输入输出
- 某些第三方库可能使用自己的 HTTP 客户端，绕过全局拦截
- 过度修改可能导致调试困难或与其他脚本冲突
- 生产环境中应谨慎使用，避免影响正常业务逻辑
- Service Worker 可提供更底层的拦截能力，但需 HTTPS 支持
基本上就这些。掌握这些技巧后，你可以实现日志记录、敏感数据过滤、接口 mock、权限降级等实用功能。关键是理解请求生命周期，并在合适阶段插入逻辑。不复杂但容易忽略细节。
