生产环境添加domain选项后Cookie失效，未添加时浏览器不显示的问题

我在vercel.com上部署了应用。最初Cookie完全无法工作，尝试添加如下配置后：

{
  path: '/',
  secure: true,
  sameSite: 'none'
}

API显示Cookie已设置，但浏览器中却看不到，这让我困惑。于是我尝试添加domain选项：

{
  domain: 'mydomain.me',
  path: '/',
  secure: true,
  sameSite: 'none'
}

结果Cookie再次失效，在Network面板中看到提示：this attempt to set a cookie via set-cookie header was blocked because its domain attribute was invalid with regards to the current host url。

请问问题出在哪里？为什么添加domain选项后Cookie无法设置？未添加domain时，为何API显示已设置但浏览器看不到？

问题分析与解决方案 #

1. 添加domain选项后Cookie被拦截的原因 #

Vercel部署的应用默认使用*.vercel.app子域名（比如yourapp.vercel.app），此时手动指定domain: 'mydomain.me'会触发两个核心问题：

• 域名不匹配：当前请求的主机域名是Vercel的子域名，和mydomain.me不属于同一域名或父域名关系，浏览器的安全规则会直接判定该Cookie的domain属性无效，拦截存储操作。
• 域名未完成绑定验证：即便你已将mydomain.me绑定到Vercel应用，若DNS验证未通过或Vercel的域名配置未生效，服务器返回的Cookie域名依然和当前访问域名不匹配，触发拦截提示。

2. 未添加domain时API显示设置但浏览器看不到的原因 #

API返回Set-Cookie头仅代表服务器执行了设置逻辑，但浏览器会根据安全策略决定是否存储：

• 第三方Cookie拦截：如果你的前端页面和API属于跨域场景（比如页面在mydomain.me，API在yourapp.vercel.app），此时设置的Cookie属于第三方Cookie。现代浏览器默认会拦截第三方Cookie，即便配置了sameSite: none和secure: true，也会因隐私政策被静默阻止。
• SameSite=None的隐性要求：当sameSite: 'none'时，除了secure: true，还需要确保页面和API都使用HTTPS协议（Vercel默认满足，但需确认自定义域名的HTTPS已生效），否则浏览器会拒绝存储。
• Vercel边缘网络的响应头规范：Vercel的Serverless/边缘函数在返回Set-Cookie头时，若格式存在细微问题（比如多余空格、属性顺序错误），浏览器会忽略该Cookie，但API层面只会记录执行了设置动作，不会检测响应头的有效性。

可行解决方案 #

• 移除手动指定的domain属性：让浏览器自动使用当前请求的主机域名作为Cookie的domain，确保域名匹配，避免拦截。
• 配置跨域请求凭证：如果是跨域场景，前端请求需开启credentials: include（Fetch API）或withCredentials: true（XHR），同时服务器端CORS配置需允许credentials。
• 验证自定义域名配置：若要使用mydomain.me，先在Vercel完成域名绑定与DNS验证，确保应用可通过该域名正常访问，再设置domain: '.mydomain.me'（前缀点允许子域名共享Cookie）。
• 检查浏览器隐私设置：测试时关闭"阻止第三方Cookie"选项，或使用非隐私模式，排除浏览器隐私政策的影响。

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