React通过Axios请求Node Express服务遭CORS拦截问题排查

问题根源分析 #

你遇到的CORS错误，尽管后端已启用cors中间件，但核心原因大概率是后端服务未监听局域网IP，导致前端请求无法真正抵达后端，浏览器将请求失败判定为跨域拦截。

从代码可见，后端启动日志显示监听http://localhost:8080，但前端请求的是http://192.168.178.112:8080——默认情况下app.listen()仅绑定127.0.0.1（localhost），局域网内的外部请求（包括同一机器用局域网IP发起的请求）无法访问服务，进而触发CORS错误。

解决步骤 #

1. 修改后端服务监听地址 #

将Express的listen方法改为监听所有网络接口（0.0.0.0），让服务同时响应localhost和局域网IP的请求：

const port = process.env.PORT || 8080;
app.listen(port, '0.0.0.0', () => {
  console.log(`Server is running on http://localhost:${port} and http://192.168.178.112:${port}`);
});

2. 验证后端服务可达性 #

在前端设备的浏览器中直接访问http://192.168.178.112:8080/api/users（GET请求）：

• 若得到405 Method Not Allowed这类响应（因接口为POST类型），说明服务已正常监听局域网IP；
• 若无法访问，检查防火墙是否开放8080端口，或端口是否被其他程序占用。

3. 可选：限制CORS允许来源（安全优化） #

若不想允许所有跨域请求，可在cors中间件中指定前端的Origin（比如React默认运行在http://localhost:3000）：

app.use(cors({
  origin: 'http://localhost:3000' // 替换为你的React项目实际访问地址
}));

4. 清除浏览器缓存测试 #

部分浏览器会缓存CORS失败状态，建议用隐身模式重新发起请求，或清除浏览器缓存后重试。

额外排查点 #

• 确认cors中间件在所有路由之前加载：你的代码中app.use(cors())放在路由注册前，配置正确；
• 检查是否有其他中间件（如认证、日志）在CORS之前拦截请求：你的代码无此类情况；
• 验证Axios请求URL是否正确：确保192.168.178.112是后端设备的正确局域网IP。

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