从 CloudFront 到服务器的 CORS 问题以获取字体

Posted 2023-03-27

【中文标题】从 CloudFront 到服务器的 CORS 问题以获取字体

【英文标题】：CORS issue from CloudFront to server for font

【发布时间】：2019-01-26 16:31:41

【问题描述】：

我们将 Cloudfront 的 CORS 问题发送到我的网站，仅用于 FONT。

从源“http://example.com”访问“http://d2v777xrj.cloudfront.net/assets/simple-line-icons/fonts/Simple-Line-Icons-ff94ad94c3a9d04bd2f80cb3c87dcccb.woff”字体已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'http://example.com'。

【问题讨论】：

我们在字体方面遇到了完全相同的问题，并尝试了所有可能的方法。您是否设法摆脱了这个问题？除了用字体使存储桶无效之外，似乎没有其他工作。

@NicolaeOlariu 这个对我有用。

@NicolaeOlariu：在服务器端使用过滤器来启用 cors 特定的标头。它对我有用。

【参考方案1】：

参考（在查看参考后，发现这些参考对我有用。我没有在 S3 存储桶上添加任何 CORS。只有 Cloudfront 访问 S3）[针对您的情况将 themes 更改为 assets]

https://deliciousbrains.com/wp-offload-media/doc/font-cors/

http://thelazylog.com/correct-configuration-to-fix-cors-issue-with-cloudfront/

【讨论】：

在 Cloudfront 中创建一个行为来服务器接受原始标头可以完成这项工作。但在此之前，您需要配置应用程序服务器，在我的例子中是 Apache（模块标头）以设置 Access-Control-Allow-Origin 标头：Header set Access-Control-Allow-Origin: yourdomain.com

【参考方案2】：

尝试了一切，但没有任何效果！ 但解决方案非常简单，只需两步即可解决。

转到 S3 存储桶->权限->编辑：跨域资源共享 (CORS)->粘贴下面的配置。在大多数其他文章中，他们都犯了错误的标题。您必须在 AllowedHeaders 中输入“Origin”。

[ “允许的标题”：[ “起源” ], “允许的方法”：[ “头”， “得到” ], “允许的起源”：[ "http://www.yourdomain.com", "https://www.yourdomain.com", "https://yourdomain.com", “http://yourdomain.com” ], “ExposeHeaders”：[]， “MaxAgeSeconds”：3000 ]

转到 Cloudfront->行为->默认(*)->编辑 将缓存和原始请求设置更改为：使用旧缓存设置 根据选定的请求标头更改、缓存到：白名单 然后，将白名单标头添加到：Origin [Only]

它会工作.. 你可以查看Lonavala Property的工作示例

【讨论】：

这确实是解决方案

【参考方案3】：

Cloud Front 最近添加了 Origin Policy。正确配置 S3 后，将源策略更新为 s3origin 对我有用，如下所示。