对CloudFront的字体请求是“（已取消）”

Question

我在（val seq: Seq[A] = ??? val result: M[Seq[B]] = seq.traverse(doMagic) ）有一个CloudFront分配，它有一个S3存储桶作为Origin。我使用此发行版存储客户端代码的所有工件（JavaScript文件，样式表，图像和字体）。

对JavaScript文件，样式表和图片的所有请求都没有任何问题，但是对于字体文件的请求在Google Chrome中的状态为static.example.com。

以下是我如何请求这些字体：

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") } 字体文件的请求没问题，但其他文件没有问题。

我做错了什么？ S3存储桶中的每个文件都有svg ACL。

Answer 1

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

你需要：

1. 在您的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>

1. 将CloudFront上相应的标头列入白名单以传递给S3：

转到CloudFront分配上的Behaviors标签，然后选择Create Behavior并添加所需的模式：

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

将以下标题添加到白名单标题中：

• 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

如果你得到一个像：

这样的回复标题，一切都会好的

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