缓存图像的 CORS 策略

在 chrome 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";

我观察到以下情况：

1. 禁用缓存
2. 一切正常，两张图片都加载了

然后在启用缓存的情况下尝试：

1. 启用缓存
2. DOM图像加载，canvas图像创建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 中仍然会失败。

Edit 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

I think这是第一个请求，由 dom 触发。我不知道这不是 javascript 请求。

问题是图像是从以前的请求中缓存的，没有所需的 CORS 标头。因此，当您再次请求它时，对于指定了“crossorigin”的画布，浏览器使用缓存的版本，看不到必要的标头，并引发 CORS 错误。 当您将“?_”添加到 URL 时，浏览器会忽略缓存，因为这是另一个 URL。 看看这个线程：https://bugs.chromium.org/p/chromium/issues/detail?id=409090 https://bugs.chromium.org/p/chromium/issues/detail?id=409090

Firefox 和其他浏览器不存在这个问题。