如何将一个域名的Cookie设置到另一域名的Cookie目录下

你不可能直接通过name.herokuapp.com的后端响应，把Cookie写入name.vercel.app域下。这是浏览器的同源安全策略硬限制：服务端仅能为当前请求所属域名、及其父级域名设置Cookie，herokuapp.com和vercel.app属于完全独立的两个根域名，不存在上下级归属关系，无论怎么调整Cookie的sameSite、secure参数都无法突破这个限制。

方案1：绑定统一自定义域名（生产环境首选） #

自行注册一个根域名，分别为前后端服务分配同根下的不同子域：

• 在Vercel控制台为Next.js前端绑定子域，例如app.你的域名.com
• 在Heroku控制台为Nest.js后端绑定子域，例如api.你的域名.com

调整后端Cookie设置代码，新增domain参数声明Cookie作用于整个根域：

res.cookie('accessToken', at, {
        sameSite: 'lax', // 同根域场景下用lax兼容性更好，安全性比none更高
        secure: process.env.NODE_ENV === 'production',
        httpOnly: true, // 身份凭证类Cookie强烈建议开启httpOnly，避免XSS攻击窃取
        path: '/',
        domain: '.你的域名.com' // 前缀加.表示该域名下所有子域均可访问该Cookie
});

配置完成后Cookie会存储在自定义根域下，前端页面请求、getServerSideProps内发起的请求都会自动携带对应Cookie。

方案2：通过Next.js反向代理实现接口同域（无需额外购买域名） #

利用Next.js原生支持的路由重写能力，将后端接口代理到前端域名下，让浏览器判定接口请求和前端页面属于同源。
在前端项目根目录的next.config.js中添加如下重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://name.herokuapp.com/api/:path*',
      },
    ]
  },
}

module.exports = nextConfig

规则生效后，前端所有后端请求统一使用相对路径/api/xxx发起，不要直接请求Heroku的域名地址。此时后端返回的Set-Cookie头会被浏览器判定为name.vercel.app域下的Cookie，自动存储到对应域下，getServerSideProps请求同域接口时也能正常携带。
该方案下原有Cookie配置无需额外调整，保持现有参数即可。

方案3：前端手动写入Cookie（仅适合临时测试，不推荐生产使用） #

由于你当前将httpOnly设置为false，可以在前端拿到接口返回的accessToken后，直接通过document.cookie手动将Cookie写入name.vercel.app域。但该方案存在明显缺陷：

• 关闭httpOnly后，站点一旦出现XSS漏洞，攻击者可以直接窃取用户身份凭证，安全风险极高
• 需要自行实现Cookie的过期、更新、删除逻辑，维护成本高

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