Chrome+CORS+缓存-从两个不同的来源请求相同的文件

Question

我遇到了一个Chrome问题，我似乎无法完全理解，我很好奇这里的人以前是否处理过它。这不会在Firefox中重现。步骤如下：

1. 启动Chrome浏览器，导航至https://foo.mysite.com并让页面上的JS向S3发出GET ajax请求https://s3.amazonaws.com/mystuff/file.json。你会得到200的回复：

   HTTP/1.1 200 OK
   x-amz-id-2: somestuffhere
   x-amz-request-id: somestuffhere
   Date: Tue, 14 Oct 2014 03:06:41 GMT
   Access-Control-Allow-Origin: https://foo.mysite.com
   Access-Control-Allow-Methods: GET
   Access-Control-Max-Age: 3000
   Access-Control-Allow-Credentials: true
   Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
   Cache-Control: max-age=86400
   Content-Encoding: gzip
   Last-Modified: Sun, 05 Oct 2014 00:29:53 GMT
   ETag: "fe76607baa40a793eb3b3cbd373a3fb8"
   Accept-Ranges: bytes
   Content-Type: application/json
   Content-Length: 5609
   Server: AmazonS3
   

2. 打开第二个选项卡，导航到https://bar.mysite.com并让其JS为同一文件向S3发出GET ajax请求https://s3.amazonaws.com/mystuff/file.json。返回以下304响应：

   HTTP/1.1 304 Not Modified
   x-amz-id-2: somestuffhere
   x-amz-request-id: somestuffhere
   Date: Tue, 14 Oct 2014 03:06:58 GMT
   Access-Control-Allow-Origin: https://bar.mysite.com
   Access-Control-Allow-Methods: GET
   Access-Control-Max-Age: 3000
   Access-Control-Allow-Credentials: true
   Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
   Cache-Control: max-age=86400
   Last-Modified: Sun, 05 Oct 2014 00:29:53 GMT
   ETag: "fe76607baa40a793eb3b3cbd373a3fb8"
   Server: AmazonS3
   

3. 打开第三个选项卡，导航到https://foo.mysite.com（第一个站点），并重复与1中相同的步骤。Chrome由于CORS原因而终止响应，并报告以下内容：

   XMLHttpRequest cannot load https://s3.amazonaws.com/mystuff/file.json. The 'Access-Control-Allow-Origin' header has a value 'https://bar.mysite.com' that is not equal to the supplied origin. Origin 'https://foo.mysite.com' is therefore not allowed access.
   

这里的故事是什么？这不会在Firefox中重现。在Firefox中，我很高兴在第2步和第3步都得到了304，我希望在Chrome中也能看到。

Chrome中这个问题的一个临时解决方案是设置缓存控制：在S3中的文件上没有缓存，但我强迫我们的客户端在没有正当理由的情况下重新下载该文件，所以这不是一个真正的解决方案。

这是有意的、有文件记录的行为吗？这是Chrome的错误吗？还有其他想法吗？

Answer 1

看起来这是由Chromium问题260239 引起的

Answer 2

我发现这个博客有帮助：将Vary头添加到S3它通过将Vary标头添加到所有XHR请求中来提供帮助。

我确实遇到了html请求的问题，但我能够通过使用这里描述的hackround#2来克服这个问题：https://serverfault.com/a/856948

TL；破解#2的DR是使用一个"伪"查询字符串参数，该参数与HTML和XHR不同，或者不存在。示例：<img src="https://s3.png?x-request=html">

Answer 3

我只是在请求URL中添加一个时间戳，以强制再次从S3加载资产，而不是从缓存加载，例如xxxx?timestamp=yyyy