使用mswjs/data的toHandlers函数生成API时请求返回500问题排查

核心原因 #

你遇到的500错误是因为toHandlers生成的接口路径与Axios请求的路径不匹配：

• 手动编写的处理器路径是/api/users，能匹配Axios的请求地址
• toHandlers(db)默认生成的接口路径是/users（不带/api前缀），无法匹配请求，导致MSW返回500未处理错误

修复步骤 #

修改src/mocks/db.js中生成处理器的代码，给toHandlers添加pathPrefix参数，指定接口前缀为/api：

import { factory, toHandlers } from 'mswjs/data'

const db = factory({
  user: {
    id: { type: 'number', primaryKey: true },
    name: { type: 'string' },
    email: { type: 'string' },
  },
})

// 添加pathPrefix参数，匹配Axios的/api前缀
export const handlers = toHandlers(db, { pathPrefix: '/api' })
export default db

验证修复 #

修改后，toHandlers会生成带/api前缀的接口（如GET /api/users），与Axios的请求路径完全匹配，即可正常返回数据。

其他可能的排查点（若上述修复无效） #

• 检查MSW的服务是否正确注册，确保setupServer(...handlers)在应用启动前执行
• 确认模型定义的字段与请求/响应数据结构一致，避免序列化错误
• 查看浏览器DevTools的Network面板，确认请求路径、方法与MSW生成的处理器完全匹配

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