由于CORS，字体有时不加载

Question

我创建了一个自定义iconfont（如FontAwesome，但使用自定义SVG - 我使用fontcustom）。有时我的自定义字体没有加载，我得到正方形而不是图标。以下是我在Chrome控制台上获得的CORS：

Font from origin 'https://dqggv9zcmarb3.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header has a value 'https://www.coursavenue.com' that is not equal to the supplied origin. Origin 'https://pro.coursavenue.com' is therefore not allowed access.

当我没有缓存并且从https://www.coursavenue.com/转到https://pro.coursavenue.com/时，似乎会发生这种情况。但同样，这只发生了SOMETIME，如果图标没有加载，我重新加载页面，它将工作。

我有一个Rails应用程序，我的资产存储在具有云端分发的S3存储桶中。

这是我在S3上的CORS配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://*.coursavenue.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

以下是我的云端缓存行为设置：

有什么想法吗？选项Object Caching: Use Origin Cache Headers是否有问题？

Answer 1

这发生在我身上。除了在cloudfront上转发Origin标头之外，我还必须在将字体上传到S3时添加额外的标头：

s3cmd --add-header="Access-Control-Allow-Origin: *" ...

Answer 2

确保您选择了HTTP和HTTPS。