amazon-s3 - 对 CloudFront 的字体请求为 "(cancelled)"

Question

我在 ( static.example.com ) 有一个 CloudFront 分配，它有一个 S3 存储桶作为源。我使用这个发行版来存储客户端代码的所有工件(JavaScript 文件、样式表、图像和 字体 )。

所有对 JavaScript 文件、样式表和图像的请求都成功了，但对字体文件的请求状态为 cancelled在谷歌浏览器中。

这是我请求这些字体的方式:

@font-face {
    font-family: Material Design Icons;
    font-style: normal;
    font-weight: 400;
    src: url(https://static.example.com/5022976817.eot);
    src: url(https://static.example.com/5022976817.eot) format("embedded-opentype"), 
        url(https://static.example.com/611c53b432.woff2) format("woff2"), 
        url(https://static.example.com/ee55b98c3c.woff) format("woff"),
        url(https://static.example.com/cd8784a162.ttf) format("truetype"), 
        url(https://static.example.com/73424aa64e.svg) format("svg")
}

向 svg 的请求字体文件没问题，但其他的就不行。



我做错了什么？ S3 存储桶中的每个文件都有 public-read访问控制列表。

Answer 1

这似乎是 CORS 阻止从不同域加载字体的问题。

你需要:

在 S3 存储桶上启用 CORS:

转到 s3 存储桶和 Permissions选项卡选择 CORS configuration , 用您的 AllowedOrigin 添加权限:

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

您可以添加多个 AllowedOrigin :

<AllowedOrigin>https://static.example.com</AllowedOrigin>
<AllowedOrigin>http://static.example.com</AllowedOrigin>
<AllowedOrigin>https://example.com</AllowedOrigin>
<AllowedOrigin>http://otherexample.com</AllowedOrigin>

或者使用通配符:

<AllowedOrigin>*.example.com</AllowedOrigin>

将 CloudFront 上要传递给 S3 的相应 header 列入白名单:

转至 Behaviors CloudFront 分配上的选项卡，然后选择 Create Behavior并添加您想要的模式:

Path Pattern: 5022976817.eot
Cache Based on Selected Request Headers: Whitelist

将以下 header 添加到白名单 header 中:

Access-Control-Request-Headers

Access-Control-Request-Method

Origin

您可以使用 curl 测试 CORS 是否正常工作:

curl -X GET -H "Origin: https://static.example.com" -I https://static.example.com/5022976817.eot

如果您收到如下响应 header ，则一切正常:

access-control-allow-origin: https://static.example.com