Express+React环境下无法在浏览器中设置Cookie的问题排查

你的核心问题是CORS配置中Access-Control-Allow-Origin被设为通配符*，但当请求携带凭证（withCredentials: true）时，浏览器不允许这种配置——尽管你代码里写了origin: process.env.FRONTEND_URL，但大概率是环境变量未正确加载，导致cors库 fallback 到默认的*。

步骤1：验证环境变量是否正确加载 #

在Express项目的入口文件中，先确认process.env.FRONTEND_URL的值是否正确：

console.log('FRONTEND_URL:', process.env.FRONTEND_URL); // 正常应输出http://localhost:3000

const corsOptions = {
  origin: process.env.FRONTEND_URL,
  credentials: true,
  optionsSuccessStatus: 200,
};

app.use(cors(corsOptions));
app.options('*', cors(corsOptions));

如果输出undefined，说明环境变量未加载：

• 安装dotenv依赖：npm install dotenv
• 在Express入口文件最顶部添加：

  require('dotenv').config();
  

• 确认项目根目录的.env文件中存在FRONTEND_URL=http://localhost:3000。

步骤2：确保CORS中间件优先于路由加载 #

必须保证app.use(cors(corsOptions))在所有路由（包括/login）之前定义，否则预检请求会绕过CORS配置，导致Access-Control-Allow-Origin被设为*。

步骤3：完善Cookie配置（可选但推荐） #

为提升兼容性和安全性，给Cookie添加SameSite属性（跨域场景建议用Strict，localhost或同域用Lax即可）：

res.cookie('jwt', accessToken, { 
  httpOnly: true,
  sameSite: 'Strict', // 或 'Lax'
  secure: process.env.NODE_ENV === 'production' // 生产环境开启HTTPS时启用
});

为什么Postman能正常工作？ #

Postman不强制执行浏览器的CORS策略，即使响应头的Access-Control-Allow-Origin是*，它也会接收并存储Cookie，但浏览器会严格拦截这种不符合规则的请求。

内容的提问来源于stack exchange，提问作者Rajviba Gohil