Express中res.cookie与res.redirect联用时cookie设置失效如何解决

• 跨域作用域不匹配：默认情况下res.cookie设置的Cookie会绑定到当前后端服务的域名下，你的后端与前端https://<myFrontend>.herokuapp.com属于完全独立的跨域域名，前端域名自然无法读取其他域名下的Cookie。
• 缺少跨域Cookie必填属性：现代浏览器对第三方Cookie有严格的安全限制，跨域场景下未显式配置SameSite、Secure属性的Cookie会被浏览器直接拦截，不会写入前端域名。
• 未显式指定Cookie生效域名：默认配置下Cookie的作用域仅包含当前服务域名，不会自动匹配前端的heroku域名，导致作用域不匹配无法读取。
• 额外注意：herokuapp.com属于公共后缀列表收录的域名，直接配置根域名.herokuapp.com的Cookie会被浏览器拦截，必须指定完整的前端二级域名。

分两种场景适配：

场景1：前后端服务属于同一个根域名 #

直接调整后端Cookie配置即可，示例代码如下：

res.cookie("session_token", token, {
  maxAge: 900000,
  domain: "<myFrontend>.herokuapp.com", // 直接填写你的前端完整域名
  secure: true, // 跨域必须开启，仅HTTPS下生效，heroku环境默认支持
  sameSite: "none", // 允许第三方场景下携带该Cookie
  path: "/"
})
res.redirect("https://<myFrontend>.herokuapp.com/#/")

注意：sameSite: "none"必须和secure: true搭配使用，否则配置不生效。

场景2：前后端服务根域名完全不同，无法共享Cookie #

改用参数传递方案，后端跳转时将token放在URL的query参数中，前端收到后自行写入Cookie：

后端代码调整： #

const token = jwt.sign(access_info.data, config.jwtSecret);
// 对token做URL编码避免特殊字符丢失
res.redirect(`https://<myFrontend>.herokuapp.com/#/?session_token=${encodeURIComponent(token)}`)

前端代码新增逻辑： #

在页面初始化/路由守卫中读取URL参数并写入Cookie：

// 读取URL query参数
const queryParams = new URLSearchParams(window.location.search);
const sessionToken = queryParams.get('session_token');
if (sessionToken) {
  // 写入前端域名下的Cookie
  document.cookie = `session_token=${sessionToken}; max-age=900; path=/; secure; sameSite=strict`;
  // 可选操作：清除URL中的token参数，避免地址栏泄露
  history.replaceState({}, document.title, window.location.pathname + window.location.hash);
}

内容的提问来源于stack exchange，提问作者Süleyman Ali Akpınar