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。
以上就是如何利用JavaScript进行网络请求的拦截和修改？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530974.html
微信扫一扫 
支付宝扫一扫 
