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

Question

如果我清除了浏览器缓存,那么只需从支持Cloudfront的S3存储桶中找到所有内容.但是,当我关闭缓存时,我在控制台中收到错误:

来自origin [ORIGIN URL]的图像已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此,不允许访问Origin [MY LOCALHOST ADDRESS].

MY 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发行版的设置.它似乎已经起作用了,但现在绝对不能使用浏览器缓存: 最新的Chomium和Google Canary上的Amazon S3的CORS问题

我也尝试在我的网站.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. 单击Forward Headers并选择Whiteelist
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>