为何CSS引用的CDN字体资源请求不携带已登录的Basic Authentication信息？

我之前也碰到过几乎一模一样的情况：页面和CSS、JS都能正常加载，唯独CSS里引用的字体报401，折腾了好一会儿才找到症结。下面给你梳理下核心原因和可行的解决办法：

核心问题所在 #

浏览器对字体这类"子资源"的加载逻辑比较特殊——哪怕是同域下的字体，当它由CSS文件间接引用时，浏览器有时候不会自动附带Basic Auth的凭证，这就导致Apache拒绝了这个无凭证的请求，返回401错误。

具体解决步骤 #

1. 针对性调整Apache配置 #

在你的Apache配置文件（虚拟主机配置或.htaccess）里，给字体文件单独设置规则，确保Auth生效的同时允许凭证传递：

# 匹配所有常见字体格式
<FilesMatch "\.(woff|woff2|ttf|otf|eot|svg)$">
    # 保留原有Basic Auth配置
    AuthType Basic
    AuthName "Restricted Area"
    AuthUserFile /path/to/your/.htpasswd
    Require valid-user

    # 关键：允许浏览器携带凭证请求字体资源
    Header set Access-Control-Allow-Credentials "true"
    # 填写你的子域名，不要用*（*和Credentials不能同时生效）
    Header set Access-Control-Allow-Origin "https://your-subdomain.example.com"
</FilesMatch>

2. 验证请求头排查问题 #

打开Chrome DevTools（F12）的Network面板，找到失败的字体请求，查看请求头：

• 如果没有Authorization: Basic ...字段，说明浏览器没携带凭证，上面的CORS配置就能解决问题；
• 如果有这个字段但还是401，那大概率是.htpasswd配置错误，或者字体所在目录的Auth规则和CSS目录不一致（比如字体目录没应用Auth规则，或者用户权限不匹配）。

3. 检查字体引用路径 #

确认CSS里的字体引用是正确的同域路径，比如用相对路径../fonts/your-font.woff2或者绝对路径/fonts/your-font.woff2，避免误用跨域地址（除非你的CDN也同步配置了Basic Auth）。

4. 强制刷新清除缓存 #

有时候浏览器会缓存旧的请求状态，导致凭证没有被正确携带。可以按Ctrl+Shift+R强制刷新页面，或者清除浏览器缓存和Cookie后重试。

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