Nuxt字体搭配CloudFront CDN出现CORS跨域问题求助

算力阿峰

2026-5-25

我碰到过好几个类似的问题——CloudFront托管字体时的CORS报错，本质都是跨域配置没跟上。虽然文件能正常下载，但浏览器的同源策略会阻止跨域加载字体资源，哪怕文件本身没问题。给你一步步排查解决：

第一步：确保源服务器返回正确的CORS响应头

首先得让你的源站（不管是Nginx、Apache还是S3）明确允许前端域名（http://example.com）跨域请求字体。举几个常见场景的配置：

Nginx配置：在站点配置文件里，给字体文件路径添加CORS头：

location ~* \.(ttf|ttc|otf|eot|woff|woff2|font.css)$ {
    add_header Access-Control-Allow-Origin http://example.com;
    add_header Access-Control-Allow-Methods GET;
    add_header Access-Control-Allow-Headers Origin;
    add_header Cache-Control "public, max-age=31536000";
}

如果需要支持多个域名，可以用$http_origin配合条件判断，生产环境不建议直接用*通配符，尽量指定具体域名更安全。

Apache配置：在站点的.htaccess文件里添加规则：

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "http://example.com"
</FilesMatch>

S3存储桶作为源：在桶的CORS配置中添加允许规则：

[
    {
        "AllowedHeaders": ["Origin"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["http://example.com"],
        "ExposeHeaders": []
    }
]

第二步：配置CloudFront转发Origin头并正确缓存CORS响应

CloudFront默认不会把Origin请求头发给源站，这就导致源站不知道请求来自哪里，不会返回CORS头；同时还要确保缓存时区分不同的Origin，避免不同域名请求拿到错误的缓存。

操作步骤：

登录CloudFront控制台，找到你的分发，进入行为标签页，编辑对应字体文件路径的缓存行为（比如匹配/_nuxt/fonts/*的规则）。
在缓存键和源请求区域，选择自定义转发请求头，添加Origin头。
配置缓存策略：如果用自定义缓存策略，要把Origin加入缓存键（这样不同Origin的请求会分开缓存）；如果用默认策略，建议创建新的缓存策略包含Origin头。
确保响应头策略保留源站返回的CORS相关头（比如Access-Control-Allow-Origin、Access-Control-Allow-Methods），优先让源站返回这些头，CloudFront负责转发即可。

第三步：刷新CloudFront缓存

之前的缓存可能已经存储了不带CORS头的响应，所以需要手动刷新字体文件路径（比如/_nuxt/fonts/*），让新请求能获取到带正确CORS头的资源。

完成以上三步后，用Chrome无痕模式测试（避免浏览器缓存干扰），字体应该就能正常加载，控制台的CORS报错也会消失。

内容的提问来源于stack exchange，提问作者王信凱