AWS的CORS标头失败-Cloudfront，S3和W3TotalCache

Question

**已解决-这里的问题是已将Cloudfront的DNS记录指定为TXT记录。 将其更改为CNAME可解决问题。 如果有人能提供任何有关为何此次微调可以解决字体文件看似无关的错误的见解，我就耳目一新:)

因此，我一直在阅读有关该主题的几乎所有内容，而我对于如何使它变得如此复杂感到迷茫。

我正在为一些加密货币图标使用css库，它具有如下语句：

@font-face {
  font-family: "cryptocoins";
  src: url('cryptocoins.woff2') format('woff2'),
    url('cryptocoins.woff') format('woff'),
    url('cryptocoins.ttf') format('truetype');
}

这些是本地路径，因为cryptocoins.css与.ttf，.woff，.woff2文件位于同一文件夹中。 尽管整个应用程序中的所有其他内容都正在快速加载且没有任何安全问题，但是对于这些文件，我在调试控制台中看到错误；

Access to Font at 'https://s3.archive/path/to/cryptocoins.woff2' from origin 'https://siteurl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://siteurl.com' is therefore not allowed access.
Access to Font at 'https://s3.archive/path/to/cryptocoins.woff' from origin 'https://siteurl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://siteurl.com' is therefore not allowed access.
Access to Font at 'https://s3.archive/path/to/cryptocoins.ttf' from origin 'siteurl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'siteurl.com' is therefore not allowed access.

因此，我测试了网址，以查看它们是否真的可以正确解析

curl -sI -H "Origin: https://siteurl.com" -H "Access-Control-Request-Method: GET" https://s3.archive/path/to/cryptocoins.ttf 

并且我得到了以下消息，我认为这表明一切都按预期进行：

HTTP/2 200 
content-type: application/vnd.ms-opentype
content-length: 96448
date: Fri, 13 Apr 2018 18:58:48 GMT
access-control-allow-origin: https://siteurl.com
access-control-allow-methods: GET
access-control-allow-credentials: true
last-modified: Fri, 13 Apr 2018 18:29:48 GMT
etag: "kjscvsnxcjsccfa8534790552cfc79"
accept-ranges: bytes
server: AmazonS3
vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
age: 1759
x-cache: Hit from cloudfront
via: 1.1 correct_id_code.cloudfront.net (CloudFront)
x-amz-cf-id: klsvndjlkJnlkjaNbVr0UaiWSQ177ATa2TchQ1nu1pU8WkrqQ==

我的S3存储桶具有以下CORS配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>

</CORSConfiguration>

Cloudfront协议行为设置：

Origin:                        https://s3.archive
Viewer Protocol Policy:        Redirect HTTP to HTTPS

Allowed HTTP Methods:        GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

白名单标头：

Access-Control-Allow-Origin
Access-Control-Max-Age
Access-Control-Request-Headers
Access-Control-Request-Method
Origin

我真的觉得这应该基于curl结果，所以我认为.css访问.ttf，.woff和.woff2文件的方式一定存在问题。

我认为必须有一种解决方法，但是还没有完全能够解决。 任何想法或建议将不胜感激。

Answer 1

这里的问题是，已将Cloudfront的DNS记录指定为TXT记录。 将其更改为CNAME可解决问题。 如果有人能提供任何有关为何此次微调可以解决字体文件看似无关的错误的见解，我就耳目一新:)