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

Posted 2023-03-04

【中文标题】AWS - Cloudfront、S3 和 W3TotalCache 的 CORS 标头失败

【英文标题】：CORS Header Fails with AWS - Cloudfront, S3, and W3TotalCache

【发布时间】：2018-09-24 05:41:15

【问题描述】：

** 已解决 - 这里的问题是 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.

所以我测试了这些 URL，看看它们是否真的能正确解析

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 文件的方式肯定存在问题。

我认为必须有一种方法来解决这个问题，但还没有完全得到它。任何想法或建议将不胜感激。

【问题讨论】：

您没有按照预期的方式使用它，或者您在清理 URL 时出错，或者我在这里读错了一些东西。您的 CORS 错误提到 https://s3.archive... 但您声称正在使用 CloudFront，指向此存储桶...但如果这是真的，这甚至不会是跨域请求。

嗨迈克尔 - 我实际上发现了我的错误。此处的设置使用 S3 存储桶来托管静态内容（css、js、图像），而云端分发只是充当缓存层。

【参考方案1】：

这里的问题是 Cloudfront 的 DNS 记录已被指定为 TXT 记录。将其更改为 CNAME 解决了这些问题。如果有人能提供任何关于为什么这个小调整修复了与字体文件看似无关的错误的任何见解，我全神贯注:)