Reactjs：MSW 模拟处理程序失败并出现错误“网络请求失败”

Question

我有一个 React 应用程序，我使用 msw 来模拟我的服务器响应。我正在尽一切努力设置服务器并传递正确的处理程序。

早些时候，这工作得很好。突然间，我的所有模拟请求都在我的机器上失败了。这是在我朋友的一台机器上运行的。

我们检查过，我们使用的是相同的节点版本。

  rest.get(`http://localhost:3000/api/users`, (req, res, ctx) => {
    const mockApiResponse = [{id: 1,name: "Test",add: "xyz"}];

   
    
    return res(ctx.json(mockApiResponse));
  })

突然所有请求都失败了，我们在控制台上收到“FETCH ERROR”、“网络请求失败”错误。我们尝试在组件中记录请求，它的状态为“已拒绝”。

在实时浏览器请求中工作正常。

大家有什么建议吗？

Answer 1

首先，确定谁在扔

FETCH_ERROR

。如果这是您的请求客户端，请查看它是否为您提供了额外的详细信息来建议根本原因。如果是 MSW，它应该包含

error.cause

以及导致请求失败的实际错误消息。

接下来，按照调试运行手册进行操作。就您而言，请求似乎确实到达了处理程序，但我仍然认为遵循运行手册对于减少任何潜在问题很有用。

您发布的代码表明您正在使用 MSW 1.x。 请注意，它已经旧了，不应再使用。我强烈建议您升级到 MSW 2.0。请参阅迁移指南，它将帮助您做到这一点，甚至提供代码模块以使迁移更顺利。您遇到的问题有可能自去年 10 月（即 1.x 的最后一个版本）以来已得到修复。

迁移到 V2 后，请检查您的 Node.js 版本。我建议始终使用 LTS。如果您使用 Jest 运行测试，请在 MSW 的 GitHub 存储库中搜索多个与 Jest 相关的问题，以找到适合您的解决方案。我推荐的解决方案是迁移到 Vitest 甚至更好 - 迁移到 Cypress 或 Playwright 进行浏览器内组件测试（假设您正在测试此类代码）。