React无法在浏览器保存Cookie，但Postman调用后端API正常

1. 前端请求未携带凭据 #

React发起跨域请求时，默认不会携带Cookie等身份凭据，必须显式配置：

• 若用axios：

  axios.post('/api/login', loginFormData, {
    withCredentials: true // 开启凭据携带
  })
  

• 若用原生fetch：

  fetch('/api/login', {
    method: 'POST',
    credentials: 'include', // 允许携带Cookie
    body: JSON.stringify(loginFormData),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  

2. 后端跨域配置未放开凭据权限 #

如果Node.js后端用cors中间件，必须指定允许的源（不能用通配符*）并开启凭据支持：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 你的React前端地址
  credentials: true // 关键，允许跨域携带Cookie
}));

如果手动设置响应头，要确保返回这两个字段：

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Credentials', 'true');

3. Cookie的SameSite属性配置冲突 #

后端设置Cookie时，SameSite属性会影响跨域场景下的Cookie存储：

• 开发环境可临时设为None，同时配合secure: true（HTTPS环境），或者用Lax：

res.cookie('authToken', userToken, {
  httpOnly: true,
  sameSite: process.env.NODE_ENV === 'production' ? 'Lax' : 'None',
  secure: process.env.NODE_ENV === 'production',
  maxAge: 24 * 60 * 60 * 1000
});

注意：SameSite: None必须搭配secure: true，否则浏览器会拒绝保存Cookie。

4. 域名/端口不匹配 #

确保前端请求的API地址和后端服务的域名（含端口）完全一致，比如后端跑在localhost:5000，前端不能用127.0.0.1:3000发起请求，必须用localhost:3000，否则浏览器会判定为不同域，拒绝存储Cookie。

5. 浏览器隐私设置限制 #

检查浏览器是否开启了「阻止第三方Cookie」，跨域场景下该设置会拦截Cookie存储，开发阶段可临时关闭测试。

内容的提问来源于stack exchange，提问作者Shivam Kumar