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

Posted 2023-03-27

【中文标题】对 CloudFront 的字体请求为“（已取消）”

【英文标题】：Font requests to CloudFront are "(cancelled)"

【发布时间】：2018-07-27 11:00:48

【问题描述】：

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

对 JavaScript 文件、样式表和图像的所有请求都成功成功，但是，对字体文件的请求在 Google Chrome 中的状态为 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 ACL。

【问题讨论】：

我遇到了同样的问题。你有没有找到这个问题的答案？

我通过查看互联网上的大量文章/文档页面来修复它，但我根本不记得修复它的确切步骤。但是，我肯定知道我已经阅读了以下内容：docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/… 我来晚了，所以我将尝试在明天的答案中总结我获得的知识。

【参考方案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 的相应标头列入白名单：

转到 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