跨域Fetch请求未携带Cookie问题排查求助

问题场景 #

网站部署在www.example.com和www.example.de等多个顶级域名，期望用户在.com域名登录后，.de域名通过Fetch请求.com时自动携带认证Cookie。当前配置：

• 认证Cookie jwt：domain=www.example.com、path=/，带有Secure和SameSite=None属性
• .com域内使用该Cookie认证正常
• .de域发起的Fetch请求：

fetch("https://www.example.com:44319/", {
  method: "POST",
  credentials: "include",
  mode: "cors",
  body: ""
});

• 响应头已配置：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://www.example.de:44319

• 问题：请求未携带Cookie头，修正OPTIONS预请求头后仍未解决

排查与解决方案 #

1. 端口不匹配触发同源拦截 #

Cookie的生效范围受同源策略约束，同源判断需要「协议+域名+端口」三者完全一致：

• 你的Cookie是在www.example.com（默认HTTPS端口443）下设置的，但Fetch请求指向www.example.com:44319（自定义端口），二者属于不同源，浏览器会拒绝跨端口携带Cookie。
• 解决：确保登录域名和Fetch请求的域名端口一致，要么统一使用默认443端口，要么在设置Cookie时的上下文端口与请求端口完全匹配。

2. 预请求OPTIONS响应头需完整配置 #

即使修正了OPTIONS头，仍需确保包含以下关键字段，否则预请求不通过会阻断后续正式请求：

Access-Control-Allow-Origin: https://www.example.de:44319  # 必须是具体源，不能用通配符*
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: POST  # 必须明确允许请求使用的POST方法
Access-Control-Max-Age: 86400  # 可选，缓存预请求结果减少重复请求

若请求包含自定义请求头，还需添加Access-Control-Allow-Headers列出对应头名。

3. SameSite=None的配置与兼容性验证 #

• 必须同时设置Secure属性，这是浏览器存储SameSite=NoneCookie的强制规则，若缺失浏览器会直接拒绝存储该Cookie。
• 确保浏览器版本支持SameSite=None（Chrome ≥76、Firefox ≥69、Edge ≥79），旧版本浏览器会将SameSite=None视为SameSite=Strict，导致跨站点不携带Cookie。

4. 浏览器隐私策略限制 #

部分浏览器的隐私保护模式（如Chrome隐私沙盒、Firefox增强跟踪保护）会拦截跨站点Cookie，即使配置正确也可能无法携带。可先关闭隐私模式测试，若恢复正常则需考虑备用方案：

• 使用OAuth2授权码流程：用户在.com域名完成授权后，跳转到.de域名并携带授权码，.de域名用授权码换取本地令牌。
• 使用postMessage+Storage API：.com域名登录后将令牌存入localStorage，通过postMessage传递给.de域名页面，.de域名存储令牌后用于后续请求。

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