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 Bucket有以下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可解决问题。如果有人能够提供任何见解，为什么这个小调整修复了看似无关的错误与字体文件，我全心全意：）

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

1 个答案: