主域Cookie无法随跨子域font-face请求发送的问题求助

问题核心原因 #

浏览器对字体资源的跨域请求处理逻辑和图片不同：图片属于简单请求，浏览器默认会携带Cookie；而字体资源的跨域请求被归类为需要额外CORS配置的资源，即使是同主域的子域，也需要满足Cookie共享规则和服务器端CORS响应头要求，否则浏览器会自动屏蔽Cookie。

具体解决步骤 #

1. 修正Cookie的Domain属性
   确保在主域example.com设置Cookie时，将Domain属性设为.example.com（注意前缀的点）。这样所有子域（包括asset.example.com）才能识别并携带该Cookie。示例设置（以HTTP响应头为例）：

   Set-Cookie: your_cookie_name=value; Domain=.example.com; Secure; SameSite=Lax; Path=/
   

2. 给子域字体资源配置CORS响应头
   在asset.example.com的服务器上，针对字体文件（如.otf、.woff2等）添加以下响应头：

   Access-Control-Allow-Origin: https://example.com
   Access-Control-Allow-Credentials: true
   

   注意：Access-Control-Allow-Origin不能设为*，必须明确指定主域地址，否则浏览器会拒绝携带Cookie。

3. 验证Secure和SameSite配置

   • 如果站点使用HTTPS（你的示例中是HTTPS），必须开启Secure属性，否则Cookie不会被跨域携带。
   • SameSite建议设为Lax（大多数场景适用），如果需要跨站请求也携带，可设为None，但必须配合Secure属性。

4. 确认CSS请求格式
   确保字体的URL没有拼写错误，且使用HTTPS协议（和主域协议一致），避免协议不匹配导致的Cookie丢失。

补充说明 #

你遇到的图片能正常携带Cookie，是因为浏览器对图片这类资源的跨域Cookie携带规则更宽松，属于无需预检的简单请求范畴；而字体资源在浏览器的资源分类中属于"非简单请求"，必须满足CORS的完整配置才能携带Cookie。

内容的提问来源于stack exchange，提问作者Bruce the Panda