ruby-on-rails - Firefox 不呈现来自 CloudFront 的字体

Question

我有一个 rails 应用程序，托管于 Heroku .在部署期间， Assets 与 同步亚马逊 S3 桶通过 asset_sync gem 和 View 通过 调用这些 Assets 云前线 .但是，使用 查看网站时不会呈现字体。火狐 (文件加载在 Firebug 的网络选项卡中，但根本不使用)。 Safari 效果很好。

我有以下 CORS S3上的配置:

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

我的应用程序还设置了以下标题:

Access-Control-Allow-Origin: *
Access-Control-Request-Method: *

但是 CloudFront 返回没有它们的字体......为什么没有加载字体？
提前致谢。

Answer 1

某些版本的 Internet Explorer 和 Firefox 将字体视为攻击媒介，如果它们由另一个域提供(跨域策略)，则会拒绝加载它们。

在标准 HTTP 服务器上，您只需添加 Access-Control-Allow-Origin: * header 绕过 CORS 策略。问题是 S3 不支持发送。 (虽然根据规范它应该支持 CORS，但不发送 header )。

有一个解决方法。 CloudFront 可以指向另一台可以发送 Access-Control-Allow-Origin 的服务器。 header (您可以使用为您的应用提供服务的服务器 ;) 来做到这一点)。

这可以通过从 AWS 控制台向您的 CloudFront 分配添加自定义源来完成。接下来，您必须使用字体类型和新添加的 Origin 添加行为。您可以使用通配符作为文件名。 (您需要为您拥有的每种字体类型执行一次此操作)。

示例:

Path Pattern: /assets/*.woff

准备好后，您可以使用以下方法验证 header 是否存在:

curl -I http://cloudfrontid.cloudfront.new/assets/font.woff

希望您会看到 Access-Control-Allow-Origin header ，由您的服务器与文件本身一起提供，由 CloudFront 缓存并包含 header 。

希望有帮助!