请求未携带Cookie问题咨询：跨域React客户端与Node.js服务端

1. 补全服务端Cookie的secure属性 #

当设置sameSite: 'None'时，浏览器强制要求Cookie必须搭配secure: true（仅HTTPS环境生效，本地HTTP开发需额外配置浏览器），否则会直接忽略该Cookie。修改你的Cookie设置代码：

res.cookie("token", jwtCreation, {
  maxAge: 24 * 60 * 60 * 1000,
  sameSite: 'None',
  secure: true, // 必须添加这个属性
});

本地HTTP开发注意：Chrome默认拦截sameSite: None的HTTP Cookie，需在chrome://flags中开启Insecure origins treated as secure，并添加你的客户端域名。

2. 配置服务端CORS允许凭证 #

跨域请求携带Cookie的前提是，服务端CORS配置必须允许凭证，且Access-Control-Allow-Origin不能用通配符*，需指定客户端具体域名。用cors包的配置示例：

const cors = require('cors');

app.use(cors({
  origin: 'https://your-react-domain.com', // 替换为你的React客户端域名
  credentials: true, // 允许携带凭证
}));

若手动设置响应头：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://your-react-domain.com');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

3. React端Axios请求开启withCredentials #

Axios默认不会携带跨域Cookie，需显式开启该配置：

// 单个请求配置
axios.post('https://your-server-domain.com/api/login', {
  // 请求数据
}, {
  withCredentials: true, // 开启携带Cookie
});

// 全局配置（更便捷）
axios.defaults.withCredentials = true;

额外检查点 #

• 确认客户端与服务端确为跨域（同域名不同端口也属于跨域）
• 打开浏览器控制台的Application面板，检查Cookie是否成功存储；若未存储，查看Console的警告信息（浏览器会明确提示拒绝Cookie的原因）
• 本地开发时不要混用localhost和127.0.0.1，浏览器会将二者视为不同域名

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