Apache2 + CloudFront字体加载失败（CORS问题）-2023新版界面

1. 为何仅字体受CORS问题影响？ #

浏览器对字体资源的跨域访问有特殊严格限制：出于版权保护的规范要求，字体文件必须通过CORS验证才能被跨域页面加载。而图片、普通CSS等资源的跨域限制相对宽松，浏览器默认允许加载，所以只有字体会触发这类报错。

2. 浏览器报错说明 #

从截图来看，核心问题是浏览器检测到字体资源的响应中缺少Access-Control-Allow-Origin头，或者该头的值与当前页面域名不匹配，导致浏览器拒绝加载字体文件。

3. CloudFront行为配置修改要点 #

• 转发Origin请求头：在对应行为的「缓存键和源请求」设置里，务必勾选转发Origin头到Apache源服务器。只有拿到这个头，Apache才能返回匹配的CORS响应头。
• 调整缓存策略：如果使用自定义缓存策略，要把Origin头加入缓存键的组成部分，避免不同域名的请求共用同一份无CORS头的缓存文件。
• 配置响应头（可选）：若不想在Apache上配置，可直接在CloudFront的响应头策略中添加Access-Control-Allow-Origin，值设为你的业务域名（如https://www.monteurzimmerguru.de）；不建议设为*，会降低安全性。

更新故障（此前正常运行后复发）的可能原因 #

• CloudFront配置变更：之前转发Origin头的设置被误修改，或者缓存策略被调整，导致CORS头无法正确生成或缓存。
• Apache配置失效：.htaccess或httpd.conf中的CORS规则被删除、注释，或者域名匹配规则写错（比如新增子域名但未同步更新规则）。
• 缓存未刷新：CloudFront中旧的无CORS头的字体缓存未过期，需要手动提交字体资源的缓存刷新请求。
• 域名或资源变动：新增了字体文件、更换了域名（如从非www切换到www），但CORS规则未同步更新。

内容的提问来源于stack exchange，提问作者Philipp S.