React登录测试通过却出现Cross origin http://localhost forbidden错误求助

问题原因 #

你遇到的跨域报错是因为Mock Service Worker（MSW）在测试环境下默认会校验跨域请求权限，即便你已经模拟了接口响应，仍需要在返回的响应中显式添加CORS相关头部，才能让测试环境的请求通过跨域校验。

修复方案 #

修改你的MSW接口模拟逻辑，在响应中加入允许跨域的HTTP头部：

server.use(
    rest.post('http://localhost:2001/backend_ihm/auth/login', async (req, res, ctx) => {
        const { username, password, keepLogin } = await req.json();
        return res(
            // 添加CORS允许头部
            ctx.set('Access-Control-Allow-Origin', '*'),
            ctx.set('Access-Control-Allow-Methods', 'POST, OPTIONS'),
            ctx.set('Access-Control-Allow-Headers', 'Content-Type'),
            ctx.json(user)
        );
    })
);

如果你的前端代码会发送OPTIONS预检请求，还需要单独添加对应的处理逻辑：

// 处理OPTIONS预检请求
server.use(
    rest.options('http://localhost:2001/backend_ihm/auth/login', (req, res, ctx) => {
        return res(
            ctx.set('Access-Control-Allow-Origin', '*'),
            ctx.set('Access-Control-Allow-Methods', 'POST, OPTIONS'),
            ctx.set('Access-Control-Allow-Headers', 'Content-Type'),
            ctx.status(200)
        );
    })
);

补充建议 #

• 把测试中用到的API地址抽成常量，避免硬编码，后续修改更方便。
• 确认setup()函数能正确获取到用户名、密码输入框元素，避免因元素查找失败引发隐藏问题。

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