时间戳

首页 > 解决方案 > AWS S3 + CloudFront：字体未加载（CORS 问题）

amazon-s3 - AWS S3 + CloudFront：字体未加载（CORS 问题）

问题描述

我在我的网站上添加了一些自定义字体并将它们上传到 AWS S3 + CloudFront。

这里的很多主题都描述了这个问题，但没有一个主题能解决我的问题。

使用 curl 我得到这个输出：

curl --head  https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2
HTTP/1.1 200 OK
Content-Type: binary/octet-stream
Content-Length: 25348
Connection: keep-alive
Date: Tue, 22 Oct 2019 11:54:18 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Fri, 12 Apr 2019 10:54:26 GMT
ETag: "639c2738552a0376c91e7d485e476fda"
Cache-Control: max-age=62208000
Accept-Ranges: bytes
Server: AmazonS3
X-Cache: Hit from cloudfront
Via: 1.1 bae3e24625567f5728a5caa96d6b7669.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: FRA53
X-Amz-Cf-Id: iAy-QTfuV9ZqwmaRjXE0ramVSgsZkA6MtRmQOKDSonf6I8OabrpLZA==
Age: 12818

在 Chrome 中，我收到此错误：

Access to font at 'https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2' from origin 'https://www.monteurzimmerguru.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我不明白问题的地方。错误消息说：“不存在'Access-Control-Allow-Origin'标头” 但是在curl请求中我看到了这个标头。怎么了？

谢谢

编辑 我附上了带有错误消息的屏幕截图。 Chrome-DEV

编辑 2：AWS 界面已更改（2022 年） 请查看@James Dean 的帖子。

1.) 我需要勾选选项框吗？ 在此处输入图像描述

2.) 我找不到你描述的设置。我猜UI同时发生了变化。

标签： amazon-s3fontscors

解决方案

根据以下输出，您的 S3 CORS 配置是正确的：

>curl -vk "https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2" -H "Origin: https://www.monteurzimmerguru.de"
< HTTP/2 200 
< content-type: binary/octet-stream
< content-length: 25348
< date: Thu, 24 Oct 2019 12:19:41 GMT
< access-control-allow-origin: *
< access-control-allow-methods: HEAD, GET
< access-control-max-age: 3000
< last-modified: Fri, 12 Apr 2019 10:54:26 GMT
< etag: "639c2738552a0376c91e7d485e476fda"
< cache-control: max-age=62208000
< accept-ranges: bytes
< server: AmazonS3
< x-cache: Hit from cloudfront

但是，Chrome/Browser 正在 CloudFront 上发出 OPTIONS/Preflight 请求，并且当前在 Cloudfront 上不允许选项请求。只允许 Head 和 GET。

curl -X OPTIONS "https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2" -H "Origin: https://www.monteurzimmerguru.de"
>This distribution is not configured to allow the HTTP request method that was used for this request

要解决此问题，您需要这样做：

  1. 在 CloudFront 缓存行为中，您需要允许 GET、HEAD 和 OPTIONS

  2. 在 Cache behavior, cache based on selected header 中，您应该选择 Origin

  3. 使缓存失效一次并再次测试。

推荐阅读