React项目中MSW模拟请求报错“Network request failed”求助

以下是针对本地MSW模拟请求失效、同事环境正常问题的排查和修复步骤：

• 检查MSW Worker注册状态
  打开浏览器DevTools的Application > Service Workers面板，确认MSW的worker处于激活状态。如果未加载，确保注册代码放在应用入口（如index.jsx）的最顶部，优先于任何请求发送：

  if (process.env.NODE_ENV === 'development') {
    const { worker } = require('./mocks/browser');
    worker.start();
  }
  

• 清除浏览器缓存与Service Worker
  MSW Worker可能缓存了旧逻辑，导致拦截失效：

  1. 在Application > Service Workers中点击Unregister移除MSW worker
  2. 按Ctrl+Shift+R强制刷新页面，清除浏览器缓存

• 校验请求URL与拦截规则的一致性
  确保组件中发送的请求URL和MSW处理器的URL完全匹配：

  • 若组件使用相对路径/api/users，则MSW处理器应改为rest.get('/api/users', ...)，避免因协议（http/https）或端口差异导致拦截失败
  • 核对路径中的大小写、参数是否完全一致

• 排除浏览器扩展干扰
  禁用所有浏览器扩展（如广告拦截器、代理工具），部分扩展会阻止MSW Worker运行或干扰请求拦截。测试后再逐个恢复扩展，定位问题来源。

• 重置依赖缓存
  即使Node版本一致，依赖缓存异常也可能引发问题：

  rm -rf node_modules
  rm package-lock.json
  npm install
  

  执行完成后重启开发服务器，重新测试。

• 开启MSW调试日志
  在Worker启动时添加调试配置，查看请求拦截细节：

  worker.start({ onUnhandledRequest: 'warn' });
  

  打开DevTools控制台，查看是否有Unhandled request警告，以此调整处理器的URL匹配规则。

内容的提问来源于stack exchange，提问作者The90sArtist