AWS S3 + CloudFront：无法加载字体（CORS问题）

Question

我在网站上添加了一些自定义字体，并将其上传到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请求中，我看到了此标头。怎么了？

谢谢

编辑 我已附有错误消息的屏幕截图。

Answer 1

您必须更新， 查询字符串转发和缓存以转发所有内容，并基于所有内容进行缓存 在cloudfront缓存行为设置中（cloudfont->选择一个->编辑）

Answer 2

根据以下输出，您的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 /浏览器正在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. 在“缓存行为”中，基于选定标头的缓存，应选择“来源”

3. 使缓存无效一次，然后再次对其进行测试。