JavaScript中可通过重写XHR和fetch、使用Service Worker等方式实现请求拦截。1. 重写XMLHttpRequest的open和send方法可拦截请求并添加自定义头，onreadystatechange中可修改响应数据；2. 替换全局fetch方法可在请求前修改参数，并通过克隆响应修改返回内容；3. Service Worker通过监听fetch事件能全局拦截所有网络请求，适用于HTTPS环境下的全局控制；4. 各方法有局限：XHR/fetch重写仅影响JS发起的请求，无法拦截静态资源，且DevTools显示原始数据，第三方库可能绕过拦截。根据场景选择合适方式：调试用重写，生产环境推荐Service Worker。
JavaScript 中可以通过多种方式实现网络请求的拦截和修改，主要手段包括重写原生方法、使用代理工具（如浏览器开发者工具或 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 并修改返回结果：
立即学习“Java免费学习笔记（深入）”；
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 等），适合全局控制。注册 Service Worker：
if ('serviceWorker' in navigator) {
navigator.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));
}
});
4. 注意事项与限制
虽然 JavaScript 提供了多种拦截方式，但各有局限：- 重写 XHR/fetch 仅对页面内 JS 有效，无法拦截静态资源
- Service Worker 功能强大，但必须运行在 HTTPS 或 localhost 下
- 修改响应内容时，只能影响 JS 层获取的数据，浏览器 DevTools 显示的仍是原始内容
- 某些第三方库可能使用独立的 HTTP 客户端，绕过全局 fetch/XHR
基本上就这些。选择哪种方式取决于你的目标场景：调试可用 XHR/fetch 重写，生产级全局控制建议用 Service Worker。
