WordPress+CloudFront CDN环境下Font Awesome字体CORS加载失败求助

问题分析 #

控制台报错明确显示请求的字体资源缺少Access-Control-Allow-Origin头，直接访问能下载说明源站文件存在，但跨域请求时CDN或源站的头配置未生效。你修改.htaccess无效的原因可能有三个：正则匹配错误、CloudFront缓存了旧响应、CDN未配置CORS转发规则。

解决步骤 #

1. 修正.htaccess的CORS规则 #

你之前的FilesMatch正则未转义点号（.在正则中匹配任意字符），导致规则未命中字体文件。替换为正确规则：

<FilesMatch "\.(eot|otf|ttf|woff|woff2)$">
    Header always set Access-Control-Allow-Origin "*"
</FilesMatch>

注意：若只想允许自身站点跨域，可把*替换为你的域名https://xxxxxxxx.yyyyyyyyy.com

2. 配置CloudFront的CORS策略 #

CloudFront作为CDN，需单独配置CORS以确保跨域请求返回正确响应头：

• 登录AWS控制台，进入CloudFront分发管理页
• 找到目标分发，进入行为标签页，编辑对应缓存行为（或创建针对字体路径的独立行为）
• 在缓存键和源请求区域，勾选转发请求头，选择自定义，添加Origin头
• 在响应头策略中，新建或选择包含Access-Control-Allow-Origin的策略：
  • 新建响应头策略，添加自定义头Access-Control-Allow-Origin，值设为*或你的站点域名
  • 将该策略关联到字体文件对应的缓存行为

3. 调整W3 Total Cache的CDN设置 #

确保W3TC未过滤CORS相关头信息：

• 进入WordPress后台的W3 Total Cache设置，打开CDN标签页
• 在高级选项中，确认允许的文件类型包含字体扩展名：eot,otf,ttf,woff,woff2
• 勾选转发Cookie/头信息中的Origin头，保证跨域请求时源站能正确识别

4. 刷新CloudFront缓存 #

由于之前的字体资源已被CloudFront缓存且不带CORS头，需手动清除缓存：

• 在CloudFront分发的失效标签页，创建失效请求，路径填写/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/*
• 等待缓存失效完成（通常几分钟），再刷新网站测试

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