无法在 Safari 中加载 cross-origin 图片（来自 CloudFront）

Question

在 Safari 8 中尝试从 CloudFront URL 加载图像时出现以下错误：
Cross-origin image load denied by Cross-Origin Resource Sharing policy.

这只发生在 Safari 8 上。在 FireFox 38 和 Chrome 41 最新版中它加载得很好。 (Mac 10.10)

我的设置：

1.具有以下 CORS 配置的 S3 存储桶

<?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>

2。链接的 CloudFront 分配

以下 header 已被列入白名单（在行为下）：

Access-Control-Request-Headers
Access-Control-Request-Method
Origin

3。 JavaScript

var img = new Image();
img.crossOrigin = '';
img.onload = function() {
  console.log('image loaded');
}

我尝试过的：

1.从 curl

检查 returned headers

图片 return 正确 header（特别是 Access-Control-Allow-Origin）

> curl -sI -H 'Origin: localhost' -H 'Access-Control-Request-Method: GET' http://foo.cloudfront.com/image.jpg
...
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Server: AmazonS3
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
X-Cache: Hit from cloudfront

~~2。在浏览器中检查 returned headers~~

~~有趣的是，图像在所有三个浏览器中都没有 returning Access-Control-Allow-Origin: * header。为什么会这样？~~

3。将查询字符串添加到 URL

向正在加载的 URL 添加查询字符串（例如？foo）将导致 Access-Control-Allow-Origin header 在浏览器中被 return 编辑，并允许要在 Safari 中加载的图像！这很好，但为什么添加查询字符串允许它工作（以及 return Access-Control-Allow-Origin header）？

4。从 S3 存储桶（未绑定到 CloudFront 分配）加载图像

从另一个未绑定到 CloudFront 的存储桶（具有相同的 CORS 配置）加载图像在 Safari 中也能正常工作。

最初让我相信这是一个特定的 CloudFront 问题，但上面关于查询字符串的观点让我不这么认为。

这让我彻底疯了。任何人都可以帮助阐明以上内容吗？

更新

感谢您的回复。令人沮丧的是，我似乎无法复制这个问题。

下面是一个片段，它加载了两个图像（一个来自 S3 存储桶，另一个来自其各自的 Cloudfront 分布）并且它们似乎都可以很好地加载您期望的 headers，与我上面第 2 点所说的相反。

不幸的是，我并没有真正接近确定的答案，但现在我只是代表我将其归结为一个错误，可能会按照 Derek 的建议在我的 CORS 设置之前请求图像。

var img, imgCloudfront;

img = new Image();
img.crossOrigin = '';
img.onload = function() {
  $('body').append('image loaded<br>');
}
img.src = 'http://sandbox-robinpyon.s3.amazonaws.com/test.jpg';

imgCloudfront = new Image();
imgCloudfront.crossOrigin = '';
imgCloudfront.onload = function() {
 $('body').append('image (cloudfront) loaded<br>');
}
imgCloudfront.src = 'http://d32d4njimxij7s.cloudfront.net/test.jpg';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

尝试清理浏览器缓存。

如果这不起作用，请提供 URL 示例图片。

Answer 2

这只是一个猜测，但缺少的 Access-Control-Allow-Origin header 对我来说似乎是关键点。由于某些原因，其他浏览器可以不用它，但 Safari 不行。
您是否尝试过修改 CloudFront 配置？比如转发所有 header 而不是白名单，或者更改查询字符串转发设置。正如其他人所说，请提供测试 url 以便我们自己检查。

Answer 3

参见：https://whosebug.com/a/13147554/1994767

Access-Control-Allow-Headers(<AllowedHeader>*</AllowedHeader>)header不允许通配符。必须完全匹配：http://www.w3.org/TR/cors/#access-control-allow-headers-response-header

Answer 4

仔细检查您的云端行为设置。您是否添加了自定义 header Origin。应该是Access-Control-Allow-Origin。我最近也设置了云端，发现这篇文章很有帮助：http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html

我在清除云端缓存时遇到了问题。如果您在 CORS 设置之前请求了图像，cloudfront 可能只是 return 它之前的内容，因此不会反映您的新配置。您可以尝试运行失效，它是云端行为选项卡之一。我得到了与此不一致的结果。如果您想确保它正常工作，请上传一张新图片并进行测试。我正在使用 rails，有时我会提高一个资产版本，这会导致我的所有资产都有一个新的指纹并解决缓存问题，因为每个文件都有一个新名称。）

关于您关于查询字符串的问题。您可能从云端遇到了缓存未命中。您可以尝试使用 curl 重复练习以查看响应 X-Cache: Hit from cloudfront 是否存在。在云端行为设置中，有一个 'Forward Query Strings' 的配置。这可能是一个因素。

在我的设置中，我有一个中间清漆缓存，所以我也不得不处理它以确保所有 header 都能通过。看起来你没有，但这是需要注意的事情。

Answer 5

我猜测这与浏览器缓存有关。

存在 S3 为 Non-CORS-Requests 省略 "Vary: Origin" Header 的问题。这会导致某些浏览器缓存 Non-CORS 响应并在后续需要 CORS 的请求中重复使用此缓存响应，从而导致浏览器抛出 "Cross-origin image load denied by Cross-Origin Resource Sharing policy." 错误。

有关详细信息，请参阅：S3 CORS, always send Vary: Origin

AWS S3 Forums

上也报告了该问题

无法在 Safari 中加载 cross-origin 图片（来自 CloudFront）

Unable to load cross-origin image (from CloudFront) in Safari

javascript

safari

amazon-s3

amazon-cloudfront

我的设置：

我尝试过的：

更新