Amazon s3 对CloudFront的字体请求是；（已取消）“；

我在（

static.example.com

）上有一个CloudFront发行版，它有一个S3 bucket作为源。我使用这个发行版来存储客户端代码的所有工件（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

font文件的请求是正常的，但其他的请求不是正常的

---

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

公共读取

ACL。

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

您需要：

在S3存储桶上启用CORS:

转到s3存储桶，在

权限

选项卡上选择

CORS配置

，将权限添加到您的

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

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

• 访问控制请求标题

• 访问控制请求方法

• Origin

您可以测试CORS是否可以正常使用curl：

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

如果收到如下响应标题，一切正常：

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

---

我也有同样的问题。你找到这个问题的答案了吗？我通过查看互联网上大量的文章/文档页面来解决这个问题，但我根本不记得解决这个问题的确切步骤。然而，我知道有一件事我确实读过了：我现在已经很晚了，所以我将尝试在明天的回答中总结我所学到的知识。

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