缓存的非CORS响应与新的CORS请求冲突

Question

要旨:

我有一个页面使用标签加载来自s3(HTML img标签)的图像,我有一个使用的页面xmlhttprequest.标记加载在没有CORS头的情况下被缓存,因此xmlhttprequest看到缓存版本,检查它的标题并失败并发生交叉原始错误.

细节:

编辑:safari 5.1.6和chrome 21.0.1180.89都失败.在Firefox 14中正常工作.

使用S3的新CORS,我设置CORSRule如下:

<CORSRule>
  <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
  <AllowedMethod>HEAD</AllowedMethod>
  <MaxAgeSeconds>0</MaxAgeSeconds>
  <AllowedHeader>*</AllowedHeader>
</CORSRule>

如果我在没有在请求标头中设置原点的情况下从S3请求图像,我会在响应中返回没有任何CORS标头的图像.

这个get的缓存和随后的CORS请求(一个在请求头中设置起源的请求)被拒绝,因为浏览器使用非CORS版本形成缓存.

解决这个问题的最佳方法是什么？我可以设置一些东西,以便非CORS版本永远不会被缓存吗？我应该通过将a附加?some_flag到请求的URL来区分CORS请求吗？

理想情况下,即使请求不包含"origin",我也总是会发回所需的CORS头.

Answer 1

我遇到了同样的问题.正如@monsur所说,问题是S3没有设置"Vary:Origin"标题,即使它应该.不幸的是,据我所知,没有办法让S3发送该标头.但是,您可以通过向请求添加查询字符串参数来解决此问题,例如?origin=example.com在需要CORS时.查询字符串强制浏览器不使用缓存的资源.

理想情况下,当启用CORS时,cloudfront和S3将发送Vary:Origin标头和/或Webkit会在Origin标头上隐式变化,我认为Firefox会这样做,因为它没有这个问题.

Answer 2

它绝对不是最好的方法,但您可以通过向请求添加一些url参数来禁用图像请求的缓存.通常,这是通过javascript完成的,例如:

var img = document.createElement('img');
img.setAttribute('src', yourRequestUrl + '?d=' + Date.now());
tagToAppendImg.appendChild(img);

这将总是强制一个未缓存的响应,因为以毫秒为单位的日期总是产生一个浏览器还不知道的不同的URL,但我不确定这是否解决了你的问题.