由于 CORS，字体有时无法加载

Posted 2023-03-04

【中文标题】由于 CORS，字体有时无法加载

【英文标题】：Font not loading sometime because of CORS

【发布时间】：2015-07-07 02:07:15

【问题描述】：

我创建了一个自定义图标字体（如 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/ 时，这似乎会发生。但同样，这只会在某些时候发生，如果图标没有加载并且我重新加载页面，它会起作用。

我有一个 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这个选项有问题吗？

【问题讨论】：

您是否使用不同的浏览器获得此信息？您可能还想深入了解一些historical issues。

哼，其实只是镀铬……

【参考方案1】：

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

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

【参考方案2】：

确保您选择了 HTTP 和 HTTPS。