ExpressJS后端返回Set-Cookie头 浏览器无法存储会话Cookie问题咨询

以下是导致Cookie无法正常存储、携带的全部问题及对应修正方法：

• CORS规则配置错误

当请求需要携带凭证（Cookie、HTTP认证信息等）时，浏览器不允许Access-Control-Allow-Origin设置为通配符*，必须明确指定允许的前端源地址，同时Set-Cookie属于响应头，不需要配置到允许的请求头列表中。

修正后的CORS中间件代码：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Credentials', 'true');
  // 替换通配符为前端实际访问地址
  res.header('Access-Control-Allow-Origin', 'http://localhost:4000');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,UPDATE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
  next();
});

• Session的Cookie配置错误

存在两处错误：一是Cookie的domain属性不包含端口号，你后端服务运行在localhost:3000，将Cookie的domain设置为localhost:4000完全不符合规则，浏览器会直接拒绝存储该Cookie；二是本地开发场景下，domain直接设为localhost或者省略该字段即可，会默认适配当前服务的域名。

修正后的session配置：

app.use(sessions({
  secret: "...",
  saveUninitialized:true,
  // 修正domain配置
  cookie: { maxAge: 1000 * 60 * 60 * 24, domain: 'localhost', secure: false, httpOnly: true },
  resave: false,
  store: new redisStore({ host: '__REDIS_URL__', port: 6379, client: client,ttl : 260}),
}));

• Axios配置项位置错误

axios.get方法的第二个参数就是配置项，你将withCredentials放在第三个参数的位置完全不会生效，导致第二次请求不会主动携带Cookie。

修正后的前端请求代码：

const photos = await axios.get("http://localhost:3000/dev/user/photos", {
  withCredentials: true // 配置放在第二个参数内
})

• 中间层需要透传Cookie到浏览器

你当前的前端代码是运行在4000端口的Express服务端（属于中间代理层），Node环境下的axios不会自动把后端返回的Set-Cookie同步到用户浏览器，需要手动透传该响应头：

const resp = await axios.post("http://localhost:3000/dev/user/login", {
    email: body.email,
    password: body.password
})
// 新增代码：把后端返回的Set-Cookie透传给浏览器
res.set('Set-Cookie', resp.headers['set-cookie'])

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