配置Express cors中间件后Axios请求仍报CORS错误如何解决？

解决方案 #

Access-Control-Allow-Origin是服务端响应头字段，前端完全不需要主动在请求头里添加，你加了这个字段反而会被CORS规则判定为自定义请求头，需要服务端额外放行，首先直接删掉Axios配置里的这行请求头即可。

然后按以下步骤排查服务端问题：

• 检查cors中间件的注册顺序，必须放在所有接口路由的前面。如果先定义接口路由再注册cors中间件，请求不会经过cors处理，自然不会返回对应的响应头。
• 直接用curl或者Postman请求后端接口，检查响应头中是否存在Access-Control-Allow-Origin字段，排查是否有Nginx、云网关、CDN等上层服务拦截了请求，返回的错误响应没有携带CORS相关头。测试命令参考：

curl -I http://backendUrlEndPoint

• 如果你的请求需要携带Cookie、Authorization等凭证信息，不能使用默认的cors()配置，需要明确指定允许的前端源并开启凭证支持：

const cors = require("cors");
app.use(cors({
  origin: "https://frontendURL", // 填写你的前端实际访问地址，多源可传数组或者匹配函数
  credentials: true
}));

同时Axios请求需要添加withCredentials: true配置：

const res = await axios.post("http://backendUrlEndPoint", userDetails, {
  headers: {
    "Content-Type": "application/json"
  },
  withCredentials: true // 带凭证时需要加
});

• 检查是否有自定义的OPTIONS请求处理逻辑，优先于cors中间件返回了响应，导致预检请求没有得到正确的CORS头。cors中间件默认会自动处理OPTIONS预检请求，不需要额外手动写路由处理。

如果是本地开发阶段，也可以直接用前端构建工具的代理功能转发请求，规避CORS问题，比如Vite的server.proxy、Webpack的devServer.proxy配置。

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