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

Question

如果我清除浏览器缓存，所有内容都会从我启用了 Cloudfront 的 S3 存储桶中找到。但是，当我关闭缓存时，控制台中出现错误:

来自来源的图像 [ORIGIN URL] 已被跨源资源共享策略阻止加载:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此，不允许访问 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“*””。没运气。注意:我的网站是从本地主机托管和访问的(它是一个开发环境)。

Answer 1

我发现自己遇到了同样的问题:没有出现 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 中它只会有时返回访问控制 header :

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

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

转到 AWS 控制面板中的 CloudFront 分配

点击分发设置

单击“行为”选项卡

编辑默认模式行为

单击转发标题并选择白名单

添加 3 个建议的 header :Access-Control-Request-Headers、Access-Control-Request-Method、Origin

保存更改

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