如何从跨域后端在浏览器设置第一方会话Cookie？

问题1：前后端是否必须部署在同一域名下？ #

不一定需要完全相同的域名，但要让会话Cookie成为第一方Cookie，必须满足以下两种情况之一：

• 前后端共享同一个主域名（比如前端是app.example.com，后端是api.example.com，主域都是.example.com）
• 通过反向代理，将后端API映射到前端域名的子路径下（比如前端域名example.com，后端API通过example.com/api访问）

只要满足上述任意一种情况，浏览器就会把Cookie识别为第一方，无需依赖用户开启第三方Cookie。

问题2：若需实现同域Cookie共享，如何从不同URL的API设置会话Cookie？ #

分两种场景处理：

场景1：前后端为同主域的子域名 #

配置express-session的Cookie选项时，指定统一的主域名，确保子域名间能共享Cookie：

app.use(session({
  secret: '你的密钥字符串',
  resave: false,
  saveUninitialized: false,
  cookie: {
    domain: '.example.com', // 主域名，开头的点兼容旧版浏览器
    path: '/', // 整个域名路径都可访问该Cookie
    secure: process.env.NODE_ENV === 'production', // 生产环境必须开启HTTPS
    httpOnly: true, // 禁止前端JS读取Cookie，提升安全性
    sameSite: 'lax' // 第一方Cookie下用lax/strict都可正常生效
  }
}));

这样不管是前端子域名还是后端API子域名设置的Cookie，都会被浏览器视为第一方Cookie，两者均可正常读取。

场景2：通过反向代理将API挂载到前端域名子路径 #

以Nginx反向代理为例，将前端域名的/api路径转发到后端服务，让所有请求都来自同一域名：

server {
  listen 443 ssl;
  server_name example.com;

  # 转发API请求到后端
  location /api {
    proxy_pass http://localhost:3001; # 后端服务地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cookie_domain localhost example.com; # 把后端设置的Cookie域名替换为前端域名
  }

  # 托管前端React静态资源
  location / {
    root /path/to/react/build; # React打包后的静态文件目录
    try_files $uri $uri/ /index.html; # 支持SPA路由
  }
}

此时后端express-session无需额外配置domain，因为请求来自同一前端域名，设置的Cookie会自动成为第一方，SameSite设为lax或strict均可正常生效。

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