JavaScript 无法直接拦截真实网络请求，但可通过四种方式模拟：1. Service Worker（HTTPS/localhost）；2. MSW 代理工具；3. DevTools 手动调试；4. Jest 等测试框架 mock。
JavaScript 本身无法直接“拦截”浏览器 发出的真实网络请求（比如 fetch 或 XMLHttpRequest），这是出于安全限制——脚本不能随意劫持或篡改其他页面的请求。但你可以通过几种方式 在开发、测试或调试场景中模拟拦截行为，实现类似效果：
1. 使用 Service Worker 拦截并重写请求（仅限 HTTPS 或 localhost）
Service Worker 是浏览器提供的底层能力，可在请求发出前或响应返回前进行干预，适合 PWA 或本地开发调试。
- 注册一个 SW 脚本，在
fetch事件中监听所有请求 - 用
event.respondWith()返回自定义 Response，比如 mock 数据、延迟响应、替换 URL - 注意：SW 只对同源且已启用 HTTPS（或 localhost）的页面生效，且需用户首次访问后刷新才激活
示例：
self.addEventListener('fetch', event => { if (event.request.url.includes('/api/user')) {event.respondWith( new Response(JSON.stringify({ id: 1, name: 'mock-user'}), {headers: { 'Content-Type': 'application/json'} }) ); } });
2. 开发阶段用代理 工具（推荐：Mock Service Worker / MSW）
MSW 是目前最主流的 前端 请求拦截方案，它基于 Service Worker，但提供更友好的 API 和开发体验，支持 REST 和 GraphQL。
立即学习“Java 免费学习笔记（深入）”；
- 无需修改业务代码，只需定义 handlers（如
rest.get('/api/posts', ……)） - 自动识别真实请求并返回 mock 响应，控制台还能看到拦截日志
- 支持条件匹配、延迟、错误响应、动态数据等
- 生产环境默认不启用，只在 dev 模式下运行
安装后简单启动即可：
import {setupWorker, rest} from 'msw'; const worker = setupWorker(rest.get('/api/comments', (req, res, ctx) => {return res(ctx.status(200), ctx.json([{id: 1, text: 'Hello!'}])); }) ); worker.start(); // 开发时调用
3. 浏览器 DevTools 手动模拟请求（快速调试用）
不需要写代码，适合临时验证接口行为或查看响应结构：
- 打开 Network 面板 → 右键某个请求 →“Copy as fetch”→ 粘贴到 Console 修改参数再执行
- 用“Edit and Resend”功能修改请求头、body、method 后重新发送
- 配合“Response”标签页手动编辑返回内容（仅限查看，不能拦截真实响应）
4. 单元测试中拦截请求（如 Jest + jest-fetch-mock）
在测试环境中彻底替换全局 fetch 实现，确保测试可控、可重复：
- 安装
jest-fetch-mock，在测试前调用enableFetchMocks() - 用
fetch.mockResponse()或fetch.mockReject()控制返回结果 - 适合验证组件是否正确处理 loading、success、error 状态
例如：
fetch.mockResponse(JSON.stringify({ data: 'ok'})); await myApiCall(); expect(fetch).toHaveBeenCalledWith('/api/test');
不复杂但容易忽略：真正“拦截”必须依赖浏览器机制（如 SW）或测试框架覆盖；直接改写 window.fetch 或 XMLHttpRequest 虽可行，但不稳定、易漏、难维护，不建议用于生产级 mock。
以上就是
