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。
