【发布时间】：2015-06-07 17:36:19
【问题描述】：
在 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 分配
以下标头已被列入白名单（在行为下）：
Access-Control-Request-HeadersAccess-Control-Request-MethodOrigin
3。 JavaScript
var img = new Image();
img.crossOrigin = '';
img.onload = function() {
console.log('image loaded');
}
我尝试过的：
1.从 curl 检查返回的标头
图片返回了正确的标题（特别是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.在浏览器中检查返回的标头
有趣的是，图像在所有三个浏览器中都没有返回 Access-Control-Allow-Origin: * 标头。为什么会这样？
3。向 URL 添加查询字符串
向正在加载的 URL 添加查询字符串（例如 ?foo）将导致在浏览器中返回 Access-Control-Allow-Origin 标头，并允许在 Safari 中加载图像！这很好，但是为什么添加查询字符串会允许它工作（并且还返回 Access-Control-Allow-Origin 标头）？
4.从 S3 存储桶加载图像（不绑定到 CloudFront 分配）
从另一个未绑定到 CloudFront 的存储桶（具有相同的 CORS 配置）加载图像在 Safari 中也可以正常工作。
这最初让我相信这是一个 CloudFront 问题，但上面的查询字符串让我不这么认为。
这让我彻底崩溃了。任何人都可以帮助阐明上述内容吗？
更新
感谢您的回复。令人沮丧的是，我似乎无法复制这个问题。
下面是一个 sn-p，它加载了两个图像（一个来自 S3 存储桶，另一个来自其各自的 Cloudfront 发行版），并且它们似乎都可以很好地加载您所期望的标题，这与我所说的相反上面第 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>【问题讨论】：
-
如果图像在除 safari 8 之外的所有浏览器中都能正常渲染，则问题不应该出现在图像末尾。能否提供图片地址试用一下？？
-
经过几个小时的痛苦，我看到了你的帖子，并在我的图片 src 中添加了“?foo=bar”，它在 safari 9 中解决了这个问题。今天的技术让我失望了。
标签： javascript amazon-s3 safari amazon-cloudfront