在Chrome 22和Safari 6中。
使用启用CORS的S3存储桶加载图像以在画布中使用(并进行提取),以下是代码:
<!-- In the html -->
<img src="http://s3....../bob.jpg" />
// In the javascript, executed after the dom is rendered
this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg";
我观察到以下情况:
- 禁用缓存
- 一切正常,两个图片都加载
然后启用缓存:
- 启用缓存
- DOM 图片加载成功,canvas 图片创建时出现 DOM 安全异常
如果我修改 JavaScript 代码,添加查询字符串:
this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg?_";
即使启用了缓存,一切都能正常工作。我通过使用HTTP代理并观察在失败情况下实际上没有从服务器请求图像来得出缓存是一个问题。
我被迫得出的结论是,图像缓存保存了原始请求头,然后将其用于后续的CORS启用请求,并且由于违反了同源策略而生成了安全异常。
这是否是预期行为?
编辑:在火狐浏览器中运行。
编辑2:S3存储桶上的CORS策略。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
我现在正在使用 wide open,因为我只是从我的本地计算机进行测试。这还没有进入生产阶段。
编辑3:更新了跨源资源共享策略以指定来源。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://localhost:5000</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
已验证的出站标头:
Origin http://localhost:5000
Accept */*
Referer http://localhost:5000/builder
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.3
传入的标头:
Access-Control-Allow-Origin http://localhost:5000
Access-Control-Allow-Methods GET
Access-Control-Allow-Credentials true
如果我在加载到画布中时不清除缓存,仍然无法在Chrome中成功执行。
编辑4:
刚注意到在失败的情况下出现了这个问题。
传出的标头:
GET /373c88b12c7ba7c513081c333d914e8cbd2cf318b713d5fb993ec1e7 HTTP/1.1
Host amir.s3.amazonaws.com
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.91 Safari/537.4
Accept */*
Referer http://localhost:5000/builder
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.3
If-None-Match "99c958e2196c60aa8db385b4be562a92"
If-Modified-Since Sat, 29 Sep 2012 13:53:34 GMT
传入的请求头:
HTTP/1.1 304 Not Modified
x-amz-id-2 3bzllzox/vZPGSn45Y21/vh1Gm/GiCEoIWdDxbhlfXAD7kWIhMKqiSEVG/Q5HqQi
x-amz-request-id 48DBC4559B5B840D
Date Sat, 29 Sep 2012 13:55:21 GMT
Last-Modified Sat, 29 Sep 2012 13:53:34 GMT
ETag "99c958e2196c60aa8db385b4be562a92"
Server AmazonS3
我认为这是由dom触发的第一个请求。虽然我不确定它是否是JavaScript请求。
Access-Control-Allow-Origin *
吗?因为http://localhost:5000/
可能会误导。 - Borislav Sabev