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

Question

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

来自来源 [ORIGIN URL] 的图像已被 Cross-Origin 资源共享策略阻止加载：没有 'Access-Control-Allow-Origin' header 存在于请求的资源。因此不允许访问来源 [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

我还尝试将 "Header add Access-Control-Allow-Origin "*"" 放入我的网站 .htaccess 中。没有运气。注意：我的网站是从本地主机托管和访问的（这是一个开发环境）。

Answer 1

我遇到了同样的问题，发现如下所示公开 headers 解决了问题：

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

Answer 2

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

启用 S3 网站托管
在 S3 和 CloudFront 中测试了 CORS header

以下是轻松测试 CORS header 的方法：

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

在我的例子中，它在 S3 中可以正常工作，但在 CloudFront 中它只会有时 return 返回 access-control headers :

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

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

转到 AWS 控制面板中的 CloudFront 分配
点击分发设置
单击“行为”选项卡
编辑默认模式行为
点击转发Headers和select白名单
添加 3 个建议的 header：Access-Control-Request-Headers、Access-Control-Request-Method、Origin
保存更改

一旦header进入S3，我们总能通过上面的curl命令看到正确的访问控制信息。

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

AWS S3 + CloudFront gives CORS errors when serving images from browser cache

amazon-s3

amazon-web-services

cors

amazon-cloudfront