缓存的图片CORS政策(CORS policy on cached Image)

在铬22的Safari 6。

使用CORS启用S3桶，用下面的代码加载从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加载图像，图像的画布创建一个DOM安全异常

如果我修改代码的JavaScript部分追加查询字符串，像这样：

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

一切正常，即使有缓存功能完整。我上到高速缓存是通过使用HTTP代理和观察，在发生故障的情况下，实际上没有从服务器请求的图像的问题。

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

这是预期的行为？

编辑：在Firefox。

EDIT2：在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>

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

EDIT3：更新CORS策略指定原点

<?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的请求。

Answer 1:

问题是，该图像是从前者要求缓存，如果没有必要的CORS headers.Thus，当你问了一遍，为画布，用“crossorigin”规定，浏览器将使用缓存的版本，并没有看到必要的标头，并提出了CORS错误。当您添加“？_”到URL，浏览器忽略缓存，因为这是另一个URL。看看这个线程： https://bugs.chromium.org/p/chromium/issues/detail?id=409090

Firefox和其他浏览器也不会存在这样的问题。

Answer 2:

因为高速缓存条目密钥是目标URI（参见描述的行为似乎是合乎逻辑：缓存7234超文本传输协议（HTTP / 1.1））。要解决此问题，并有效地使用你需要的图片托管服务器给在这两种情况下相同的响应缓存。

一种选择是让用户代理发送Origin在第一个请求的HTTP头太大（因为响应与关键targetUri不在缓存中已经）：

<img src="targetUri" crossorigin="anonymous" />

另一种选择是配置图片托管服务器发送相关的HTTP头CORS不管请求是否包含Origin HTTP标头。欲了解更多信息，请参阅S3 CORS，总是发送各不相同：原产地讨论在计算器上。

还可以告知用户代理响应是敏感Origin使用请求的HTTP标头Vary响应HTTP标头。缺点是，可能用户代理将使用Vary头仅作为响应验证器（而不是作为一个高速缓存条目密钥的一部分），并仅存储单个响应实例的目标URI这使得更难有效地使用高速缓存。有关更多信息，请浏览器缓存，再探州立文章马克诺丁汉。