Express与React跨域部署场景下无法设置Cookie问题求助

问题原因&解决方法 #

你遇到的是跨域场景下Cookie设置的典型遗漏配置，需要补全以下几处配置：

• 补全后端Cookie设置的必要属性
  当前你设置Cookie时缺少跨域场景下的必要属性，修改setCookie代码如下：

  const setCookie = (req, res, token) => {
    res.cookie('jwt', token, {
      expires: new Date(Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000),
      domain: '.vercel.app', // 允许同根域下的所有子域访问该Cookie，适配前后端子域差异
      sameSite: 'Lax', // 同根域场景下用Lax即可，若前后端根域不同需改为`None`
      secure: true, // sameSite为None时必须开启，HTTPS环境下强制开启更安全
      httpOnly: true // 可选，防止前端JS读取Cookie，降低XSS风险
    });
  };
  

• 补全后端CORS配置
  跨域携带凭证的请求对CORS有严格要求，必须满足以下规则：

  • Access-Control-Allow-Origin不能使用通配符*，必须明确指定前端域名，示例：https://frontend.vercel.app，多环境可做动态匹配
  • Access-Control-Allow-Credentials必须显式设置为true
  • 如果存在自定义请求头，需在Access-Control-Allow-Headers中显式声明对应的头字段

• 前端配置校验
  你已经配置了单次请求的{withCredentials: true}，也可以全局配置避免遗漏：

  axios.defaults.withCredentials = true
  

  注意所有请求必须走HTTPS协议，HTTP环境下secure属性的Cookie不会被传输和存储。

• 常见误区提醒
  跨域请求下后端设置的Cookie属于后端域名（backend.vercel.app），不会出现在前端域名（frontend.vercel.app）的Cookie列表中，你需要在浏览器DevTools的Application > Storage > Cookies > backend.vercel.app路径下查看是否存在对应Cookie，只要存在就代表设置成功，后续发往后端的请求会自动携带该Cookie。

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