MSW.js 请求拦截失败问题分析与解决方案

问题背景

在使用MSW.js进行API请求拦截时，开发者遇到了一个奇怪的现象：在Vite项目中，MSW 1.3.1版本能够正常拦截请求，而升级到2.2.2版本后却出现了CORS错误。这个问题不仅出现在Vite项目中，在Create React App项目中同样存在。

问题现象

当使用MSW 2.x版本时，前端应用发出的请求会报错：

GET http://localhost/api/v1/editorData net::ERR_CONNECTION_REFUSED

而在响应标签中没有任何内容返回。相比之下，使用MSW 1.3.1版本时，相同的请求能够被正常拦截和处理。

根本原因分析

经过深入调查，发现问题的根源在于以下几个方面：

1. 错误的baseUrl配置：开发者将baseUrl硬编码为http://localhost/api/${version}，而实际应用运行在http://localhost:5173。这导致了跨域请求，浏览器出于安全考虑会阻止这类请求。

2. 服务启动异步问题：在MSW 2.x版本中，worker的启动是异步操作，但代码中没有正确等待worker启动完成就发出了请求，导致拦截失败。

3. 版本差异：MSW 1.x和2.x在内部实现上有显著差异，1.x版本可能对某些错误配置有更强的容错能力，而2.x版本则更加严格遵循浏览器安全策略。

解决方案

针对上述问题，可以采取以下解决方案：

1. 修正baseUrl配置

避免硬编码baseUrl，改为使用动态构建的方式：

const version = 'v1';
export const baseUrl = new URL(`/api/${version}`, document.baseURI);

这种方式会自动使用当前页面的协议、域名和端口，确保请求是同源的。

2. 正确处理worker启动

确保在worker完全启动后再进行请求：

const launchOffline = async () => {
  const importResult = await import('msw/browser');
  
  await import('../public/mockServiceWorker.js?worker');

  await importResult.worker.start({
    onUnhandledRequest: 'bypass'
  });
};

注意await关键字的使用，确保异步操作完成。

3. 理解MSW版本差异

MSW 2.x版本相比1.x有诸多改进：

• 更严格的请求匹配规则
• 更完善的错误处理机制
• 更符合现代浏览器安全策略

开发者应该适应这些变化，而不是依赖旧版本的容错机制。

最佳实践建议

1. 使用相对路径：在配置API基础路径时，尽量使用相对路径而非绝对路径。

2. 正确处理异步：MSW的许多操作都是异步的，确保使用async/await正确处理。

3. 调试技巧：当请求未被拦截时，可以：

   • 检查worker是否已正确注册
   • 确认请求URL是否与handler中定义的路径匹配
   • 查看浏览器控制台是否有相关警告或错误

4. 版本升级注意事项：从MSW 1.x升级到2.x时，需要：

   • 更新API调用方式
   • 检查所有handler的定义
   • 确保测试覆盖所有API场景

总结

MSW.js作为一款强大的API模拟工具，在版本升级过程中可能会遇到兼容性问题。本文通过分析一个典型的请求拦截失败案例，揭示了问题根源并提供了解决方案。关键在于正确配置请求路径、处理异步操作，并理解不同版本间的行为差异。遵循这些原则，开发者可以充分利用MSW的强大功能，提高前端开发效率。