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

【问题标题】：CORS issue from CloudFront to server for font从 CloudFront 到服务器的 CORS 问题以获取字体
【发布时间】：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'。

【问题讨论】：

【解决方案1】：

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

【讨论】：

在 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 对我有用，如下所示。

【讨论】：