网站部署后后端无法向前端设置Cookie问题（Node.js+React技术栈）

问题原因 #

1. Cookie Domain配置错误
   你在res.cookie中把domain设置为前端域名frontendwebsite.com，但Cookie是由部署在backendname.herokuapp.com的服务端下发的，Cookie的domain必须匹配下发它的服务端域名，填写前端域名会触发浏览器的域名匹配校验，直接拦截该Cookie不会存储。
2. 跨站场景下SameSite和安全配置错误
   你的前端是自定义独立域名，后端是herokuapp.com域名，二者属于不同一级域名的跨站请求，你将SameSite设为strict会直接禁止跨站场景下的第三方Cookie写入；同时跨站写Cookie要求必须开启secure: true配置，仅在HTTPS请求下生效，你的现有配置缺失该字段。
3. 冗余调用报错
   接口代码中已经调用了.json()返回响应，后续追加的.send()属于重复调用响应方法，会触发服务端隐式报错，也可能影响响应头中的Cookie下发。

解决方案 #

方案一：调整现有配置适配跨站场景（最快生效） #

1. 修改服务端接口的Cookie配置，删除错误的domain字段（浏览器会默认继承下发Cookie的服务端域名），调整SameSite规则并新增安全配置，同时删除冗余的.send()调用，修改后代码如下：

res.status(201)
  .cookie("accessToken", accessToken, {
    httpOnly: true, 
    sameSite: 'none', 
    secure: true,
    path: '/', 
    expires: new Date(new Date().getTime() + 60 * 1000 * 4)
  })
  .cookie("refreshToken", refreshToken, {
    httpOnly: true, 
    sameSite: 'none', 
    secure: true,
    path: '/', 
    expires: new Date(new Date().getTime() + 60 * 1000 * 96)
  })
  .json({message: "login verified", username: req.body.username})

2. 确认CORS配置的origin值和你实际前端访问的完整域名完全一致，不能多末尾斜杠、不能漏https://前缀。

方案二：同根域名部署（更稳定，避免第三方Cookie拦截） #

如果不想使用SameSite:none的第三方Cookie规则，可将服务端绑定到前端自定义域名的子域名下，从根源解决跨站问题：

1. 在Netlify DNS中新增一条CNAME记录，将api.frontendwebsite.com指向你的Heroku服务地址
2. 在Heroku后台给服务端绑定api.frontendwebsite.com自定义子域名
3. 修改Cookie配置，domain设为.frontendwebsite.com（前缀加.代表匹配所有子域名），SameSite可保持strict：

res.cookie("accessToken", accessToken, {
    domain:".frontendwebsite.com",
    httpOnly: true, 
    sameSite: 'strict',
    secure: true,
    path: '/', 
    expires: new Date(new Date().getTime() + 60 * 1000 * 4)
})

4. 客户端请求地址改为https://api.frontendwebsite.com/loginAuth即可。

配置修改完成后清理浏览器缓存的旧Cookie后再测试，避免历史错误数据干扰结果。

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