从浏览器缓存提供图像时，AWS S3 + CloudFront 会出现 CORS 错误

Question

如果我清除浏览器缓存，加载的所有内容都会从支持云端的 S3 存储桶中找到。但是，当我关闭缓存时，控制台中出现错误：

来源 [ORIGIN URL] 的图像已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin [MY LOCALHOST ADDRESS] 因此不允许访问。

我的 CORS 配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

不久前我也遵循了这个建议并更改了 cloundfront 发行版设置。它似乎在当时有效，但现在绝对不适用于浏览器缓存： CORS problems with Amazon S3 on the latest Chomium and Google Canary

我还尝试在我的网站 .htaccess 中添加“Header add Access-Control-Allow-Origin "*"”。没有运气。注意：我的网站是从 localhost 托管和访问的（它是一个开发环境）。

Answer 1

我发现自己遇到了同样的问题：没有 Access-Control-Allow-Origin 出现。这是非常随机的，有时有效，有时无效。我终于通过这种方式缩小了范围：

1. 已启用 S3 网站托管
2. 针对 S3 和 CloudFront 中的 CORS 标头进行了测试

以下是如何轻松测试 CORS 标头：

curl -i -H "Origin: http://YOUR-SITE-URL" http://S3-or-CLOUDFRONT-URL | grep Access

在我的情况下，它在 S3 中可以正常工作，但在 CloudFront 中它只会有时返回访问控制标头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000

经过更多研究，我发现我们的 CloudFront 分配配置为阻止标头进入 S3。要解决这个问题：

1. 在 AWS 控制面板中转到 CloudFront 分发
2. 点击分发设置
3. 单击“行为”选项卡
4. 编辑默认模式行为
5. 点击转发标头并选择白名单
6. 添加 3 个建议的标头：Access-Control-Request-Headers、Access-Control-Request-Method、Origin
7. 保存更改

一旦标头到达 S3，我们总是可以使用上面的 curl 命令看到正确的访问控制信息。

Answer 2

我遇到了同样的问题，发现如下所示的暴露标题解决了这个问题：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>MYIP</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>