React+Node.js项目配置CORS origin为'*'携带cookie跨域问题咨询

你之前将origin设为*时出现跨域错误是浏览器的强制规则：带凭据的跨域请求不允许使用通配符作为允许源，下述动态origin配置可以完美规避这个问题。

后端CORS配置 #

使用cors包的动态origin匹配规则，既满足多未知前端地址的需求，也符合credentials要求：

const cors = require('cors');
const corsConfig = {
  credentials: true,
  origin: true, // 自动将响应头Access-Control-Allow-Origin设置为当前请求的Origin值
  allowedHeaders: ['Content-Type', 'Authorization'] // 按需添加前端需要传递的请求头
};
// 处理预检请求
app.options('*', cors(corsConfig));
app.use(cors(corsConfig));

• 该配置不会返回*作为允许源，完全符合浏览器CORS规范。

后端Cookie返回配置 #

之前响应未携带Cookie的核心原因是Cookie属性配置不符合浏览器规则，修改Cookie设置如下：

// 登录接口返回Cookie示例
res.cookie('你的Cookie名称', '对应Cookie值', {
  httpOnly: true, // 可选，防止前端JS篡改，提升安全性
  maxAge: 7 * 24 * 60 * 60 * 1000, // Cookie有效期，按需调整
  path: '/',
  sameSite: 'Lax', // 局域网HTTP测试环境用该值即可，若为HTTPS生产环境可改为None
  // HTTPS生产环境需额外开启以下两个配置
  // secure: true,
  // sameSite: 'None',
  domain: '192.168.X.X' // 替换为你后端服务的实际局域网IP，和前端请求地址的域名保持一致
});

前端配置确认 #

你当前的axios配置无需修改，withCredentials: true已满足携带Cookie的要求，测试时统一使用局域网IP访问前端页面和后端接口即可。

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