React搭配Express配置CORS后仍报Uncaught (in promise) Network Error怎么办？

第一步：验证后端服务可达性 #

• 直接在浏览器地址栏输入你请求的后端接口完整地址，看能否正常返回内容，如果无法访问，优先排查以下问题：
  • Express服务是否正常启动，监听的端口是否和你请求的端口一致
  • 前端请求地址的IP/域名是否正确，注意localhost和127.0.0.1在部分场景下存在差异
  • 若后端部署在服务器，检查安全组、防火墙是否开放了对应端口
  • 若前端是HTTPS协议，后端接口是HTTP协议，会被浏览器的混合内容策略拦截，需要统一协议

第二步：校验CORS配置有效性 #

很多时候配置了cors依赖仍不生效，都是中间件加载顺序错误导致：

• 必须将cors()中间件注册在所有路由定义之前，错误的顺序会导致CORS规则不生效，正确配置示例如下：

const express = require('express');
const cors = require('cors');
const app = express();

// CORS配置必须放在最顶部，早于路由和其他业务中间件
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的React前端实际访问地址
  credentials: true // 如果请求需要携带Cookie才需要加这个配置
}));
app.use(express.json());

// 再注册业务路由
app.get('/api/test', (req, res) => {
  res.json({code: 200, msg: 'success'});
});

app.listen(3001, () => console.log('服务启动在3001端口'));

• 如果前端请求配置了withCredentials: true，后端CORS配置不能直接写origin: "*"，必须指定明确的前端地址。

第三步：校验请求参数与路径正确性 #

• 对比前端请求路径和后端注册的路由路径是否完全匹配，注意大小写、首尾斜杠的差异
• 确认请求方法是否匹配，比如后端定义的是POST接口，前端是否错误发送了GET请求
• 检查请求头、请求体格式是否符合后端要求，比如后端需要JSON格式参数，前端是否错误传递了FormData格式

第四步：查看请求详情定位问题 #

打开浏览器控制台的「网络」标签，找到对应报错的请求，根据状态码进一步排查：

• 状态码为CORS相关错误：回到第二步重新检查CORS配置
• 状态码为404：请求路径错误，核对前后端路径
• 状态码为405：请求方法不被允许，核对请求方法
• 状态码为5xx：后端服务内部报错，查看Express服务控制台的报错信息
• 请求状态为失败/无响应：回到第一步确认后端服务可达性

附加优化 #

该报错同时包含Uncaught (in promise)提示，说明前端请求代码没有添加错误捕获逻辑，建议补充catch避免未捕获的Promise异常：

// 示例：axios请求添加错误捕获
axios.get('你的接口地址')
  .then(res => {
    // 处理正常响应
  })
  .catch(err => {
    console.error('请求失败:', err)
    // 自定义错误处理逻辑
  })

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