跨域字体加载失败：CDN缓存与Access-Control-Allow-Origin如何配合

页面文字突然变宽、品牌字体消失，未必是字体文件损坏。字体迁移到内容分发网络后，页面域名与资源域名不同，浏览器会检查跨域访问条件；边缘节点还可能保存上一次请求对应的响应头。定位时需要同时检查文件内容、跨域授权和缓存行为。

先确认拿到的确实是字体

在浏览器开发者工具中找到失败的字体请求，保存完整资源地址、状态码、响应类型、重定向过程和控制台报错。一个返回200的地址，内容可能是登录页、错误页或防护挑战页。直接在地址栏下载成功，也不能证明网页能够跨域使用它。

先检查CSS中的路径、文件名大小写、版本号及HTTPS连接。确认响应体是正确文件后，再处理CORS。若响应已经是404，给它增加允许跨域响应头不会补回丢失文件。

公开字体和受限资源分别设计

MDN的CORS说明列出了Web字体的跨域使用场景：无凭据的公开资源可以使用通配允许来源；若根据来源白名单返回具体允许来源，应配合Vary: Origin区分响应。带凭据请求不能把允许来源直接设为星号。

这不代表所有字体都应公开。先确认字体许可和业务授权范围；付费素材还需要独立的访问授权。CORS限制的是浏览器的跨域读取条件，不能充当下载鉴权，也不能阻止所有非浏览器客户端取得文件。

用两个来源交替请求验证缓存

准备测试站点A与B，以及一个不在白名单中的测试来源C。使用相同字体URL，先从A加载，再从B加载，然后交换顺序重试；每次记录请求Origin、返回的允许来源、缓存命中标识和实际字体显示结果。测试页面和域名应由团队控制，本文未执行这些测试。

如果A首次成功，B命中缓存后失败，而刷新指定资源后B又成功，应检查边缘是否把不同来源共用了同一份响应头。HTTP缓存规范规定了基于Vary选择响应的机制，但仍要核对所用CDN是否支持相应变体，以及是否存在覆盖响应头的自定义规则。

来源C用于验证白名单边界。不要把请求中的任意Origin原样写回响应；这会让“只允许指定网站”的设计失去意义。测试时也要覆盖未携带Origin的请求，避免它先填充了不合适的缓存版本。

修复后清理哪些旧缓存

只修改源站响应头，已经缓存的对象不一定立即变化。记录变更涉及的字体路径和缓存规则，清理或更新对应版本，并检查浏览器缓存、边缘缓存与源站返回是否一致。不要为了一个字体故障清空全站所有缓存，引发不必要的回源高峰。

通过标准是：目标页面实际使用预期字体，A与B在不同访问顺序下都正常，C保持预期限制，资源没有被替换成错误页。进行安全加速SCDN接入时，可将这组样本放入静态资源验收清单；多层缓存问题可结合缓存分层排查继续定位。

资料核对日期：2026年10月30日。本文由AI辅助整理，并依据文内原始资料核对；示例与建议流程不代表已执行的客户测试。产品配置和软件维护状态请以实施时的官方资料为准。