CORS拦截React携带凭证POST请求的配置问题排查

• 默认app.use(cors())配置失效：cors包默认credentials值为false，不会返回Access-Control-Allow-Credentials: true响应头；同时默认origin配置返回通配符*。浏览器CORS规则明确要求：带凭证（cookie、认证头、TLS证书等）的跨域请求，Access-Control-Allow-Origin不能为*，且必须显式返回Access-Control-Allow-Credentials: true，任意条件不满足浏览器会直接拦截响应，前端抛出无响应详情的Network Error。
• 自定义白名单配置失效：现有白名单配置仅做了源校验和OPTIONS请求状态码设置，缺少credentials: true配置，未返回允许凭证的响应头，不符合CORS校验规则，因此请求被拦截。
• cors({ credentials: true, origin: true })可通行的原因：origin: true会让中间件将请求自带的Origin头值直接写入Access-Control-Allow-Origin响应头（不会返回通配符*），搭配credentials: true返回的允许凭证头，刚好满足带凭证请求的CORS校验要求。但该配置会放行所有源的带凭证跨域请求，存在安全风险，无法满足白名单限制需求。

后端CORS配置 #

在白名单校验逻辑的基础上，显式开启credentials: true即可，代码如下：

const allowedOrigins = [
  "https://www.yoursite.com",
  "http://127.0.0.1:5500",
  "http://localhost:3500",
  "http://localhost:3000",
];

const corsOptions = {
  origin: (origin, callback) => {
    // 生产环境请删除 || !origin 逻辑，该规则会放行无Origin头的非浏览器请求（如Postman、curl调用）
    if (allowedOrigins.includes(origin) || !origin) {
      callback(null, true);
    } else {
      callback(new Error("Not allowed by CORS"));
    }
  },
  credentials: true, // 核心配置：允许跨域请求携带凭证
  optionsSuccessStatus: 200, // 兼容旧浏览器对OPTIONS预检请求成功状态码的要求
};

app.use(cors(corsOptions));

配置注意事项 #

• 白名单地址必须和前端实际访问地址完全匹配：协议、域名、端口三者缺一不可，比如前端实际访问http://localhost:3000，就不能写成https://localhost:3000或http://localhost:3001，否则会被源校验拦截。
• 不要手动在全局响应头中设置Access-Control-Allow-Origin: *，该配置与凭证携带规则互斥，会直接导致CORS校验失败，cors中间件会自动处理所有CORS相关响应头，无需手动添加。
• 现有前端axios配置的withCredentials: true和Content-Type: application/json符合要求，无需修改。

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