跨域Nextjs+Express认证：如何阻止Chrome清除跨站会话Cookie？

核心问题背景 #

前端Next.js应用部署在frontend.vercel.app，后端Express应用部署在api.my_vps_domain.net，完全跨域。已配置CORS允许带凭证请求，前端axios启用withCredentials: true，但仍出现以下问题：

• 后端设置的会话令牌Cookie在浏览器中可见，但Next.js服务端组件无法读取
• 页面刷新后Cookie被清除

问题原因分析 #

1. 浏览器第三方Cookie隐私限制 #

当前主流浏览器（Chrome、Firefox等）对跨域第三方Cookie有严格的隐私管控：

• 后端域名api.my_vps_domain.net相对于前端frontend.vercel.app属于第三方域名，设置的Cookie会被浏览器标记为第三方Cookie
• 即使配置了SameSite: "none"和secure: true，浏览器的隐私沙箱机制（如Chrome Privacy Sandbox）仍会限制这类Cookie在跨域场景下的可用性，尤其是服务端渲染（SSR）场景
• Next.js服务端组件运行在Vercel服务器上，其发起的请求属于服务器到服务器的上下文，与前端浏览器的Cookie上下文不共享，浏览器不会自动携带第三方Cookie到服务端组件的请求中

2. Cookie属性配置不匹配跨域场景 #

• Domain属性：你设置的domain: ".my_vps_domain.net"限定Cookie仅能被my_vps_domain.net及其子域访问，前端vercel.app不属于该域，服务端组件请求时无法携带此Cookie；即使移除Domain，Cookie默认绑定到api.my_vps_domain.net，依然无法跨域被前端域名的服务端请求读取
• Partitioned属性：partitioned: true会将Cookie绑定到顶级站点上下文，仅当请求来自同一顶级站点时才会携带。前端vercel.app与后端my_vps_domain.net是不同顶级站点，因此分区Cookie无法在跨域服务端请求中生效

3. 本地环境正常的本质原因 #

本地环境下前后端部署在同一自定义域名（如app.myapp.local）的不同端口，浏览器视为同源，Cookie不受跨域限制，服务端组件与前端共享同一域名上下文，因此可以正常读取Cookie

解决方案建议 #

方案1：改用Token+请求头传递（推荐） #

• 后端验证通过后，直接返回会话令牌给前端，前端将令牌存储在localStorage/sessionStorage（需做好XSS防护）或Next.js客户端Cookie中
• 在服务端组件中，通过客户端传递的Authorization: Bearer <token>请求头携带令牌，后端验证该令牌即可完成身份校验

方案2：反向代理统一域名 #

• 配置Vercel的rewrites规则，将前端域名下的API路径（如frontend.vercel.app/api/*）代理到后端api.my_vps_domain.net/*
• 此时前后端请求属于同源，Cookie可正常共享，服务端组件能直接读取到Cookie，彻底规避跨域限制

方案3：适配第三方Cookie政策（兼容性差） #

• 保持SameSite: "none"、secure: true配置，尝试添加SameParty: true属性（部分浏览器支持）
• 确保后端域名有合规的隐私政策和Cookie声明，同时依赖用户浏览器允许第三方Cookie（该方案兼容性不可控，不推荐）

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