缓存的图像CORS政策

在Chrome浏览器22安培;野生动物园6。

In chrome 22 & safari 6.

加载图像从S3的使用在一个画布（含提取为主要目的）使用CORS启用S3斗，与下面的code：

Loading images from s3 for usage in a canvas (with extraction as a primary intent) using a CORS enabled S3 bucket, with the following code:

<!-- 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";

我观察了以下内容：

I have observed the following:

1. 禁用缓存
2. 在一切工作正常，无论是图像加载

然后尝试用缓存启用：

1. 启用缓存
2. 在DOM加载图像，画布图像创建一个DOM安全异常

如果我修改了code的JavaScript部分追加一个查询字符串，像这样：

If I modify the javascript portion of the code to append a query string, like so:

this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg?_";

一切正常，即使启用高速缓存充分。我上给缓存通过使用http代理并观察，在失败情况下，图像实际上不从服务器请求的是一个问题。

Everything works, even with caching enabled fully. I got on to the caching being a problem by using an http proxy and observing that in the failure case, the image isn't actually being requested from the server.

我不得不得出的结论是，图像缓存保存原始请求头，然后再被用于后续CORS启用请求 - 和安全异常被因违反同源策略的产生

The conclusion I'm forced to draw is that the image cache is saving the original request headers, which are then being used for the subsequent CORS enabled request - and the security exception is being generated due to violation of the same origin policy.

这是预期的行为？

编辑：在Firefox工程

Works in firefox.

EDIT2：在S3存储CORS策略

Cors policy on s3 bucket

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

我使用的是敞开的，因为我只是从我的本地盒测试现在。这是不是在生产呢。

I'm using wide open because I'm just testing from my local box right now. This isn't in production yet.

EDIT3：更新CORS策略指定的原产地

Updated cors policy to specify an origin

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

验证输出头：

Verified outgoing headers:

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

不过加载到画布时，失败的铬，如果我不胸围缓存。

Still fails in chrome if I don't bust the cache when loading into the canvas.

编辑4：

只是注意到了这一点在故障情况下。

Just noticed this in the failure case.

输出头：

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的请求，虽然。

I think this is the first request, triggered by the dom. I don't know that it isn't the javascript request though.