Safari浏览器第三方Cookie跨域访问失效 求全浏览器兼容解决方案

核心问题根因 #

Safari默认拦截所有第三方上下文的Cookie（包括iframe嵌套场景的Cookie写入/读取），默认禁用了跨站跟踪相关的存储权限，仅靠第三方Cookie+iframe的方案天然无法适配。

可落地的兼容方案 #

方案1：无身份校验场景：纯CORS配置 #

如果你的API不需要做用户身份校验（无需依赖会话Cookie），直接给domainA的API配置CORS响应头即可全浏览器兼容：

• 响应头添加 Access-Control-Allow-Origin: https://domainB.com
• 响应头添加 Access-Control-Allow-Methods: GET, POST, OPTIONS
• 若存在自定义请求头，补充 Access-Control-Allow-Headers: [你的自定义请求头字段]
  domainB侧直接用普通fetch/axios调用domainA的API即可，无需额外适配。

方案2：需身份校验场景：Cookie同站化改造 #

这是兼容性最好的长期方案，操作如下：

• 给domainA的API配置一个domainB的子域名，比如 api.domainB.com，将这个域名CNAME解析到原domainA.com的服务
• 调整API服务的Cookie作用域为 .domainB.com，此时Cookie属于domainB的第一方Cookie，不会被Safari拦截
• domainB侧请求api.domainB.com接口时，fetch添加credentials: 'include'配置，axios添加withCredentials: true配置，同时domainA的CORS头补充 Access-Control-Allow-Credentials: true

方案3：临时过渡方案：授权令牌传递 #

如果暂时无法完成域名解析改造，可以用令牌机制替代Cookie：

• 用户首次访问domainB时，跳转到domainA的授权页，domainA校验用户身份后，把会话令牌通过URL参数带回domainB
• domainB把令牌存在localStorage中，后续请求domainA的API时，把令牌放在Authorization请求头里传递
• domainA的API从请求头提取令牌做身份校验，完全不需要依赖Cookie

踩坑提示 #

• 不要尝试用iframe的postMessage+localStorage方案，Safari对跨站iframe的本地存储也有拦截限制，和第三方Cookie的限制逻辑一致
• 所有方案都要正确处理OPTIONS预检请求的响应，不要让预检请求返回401/403错误，否则浏览器会直接拦截正式请求

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