title: Chrome + CORS + cache - requesting same file from two different origins
body: <p>I'm experiencing an issue with Chrome that I can't seem to fully understand, I'm curious if folks here have dealt with it before. This doesn't reproduce in Firefox. The steps are as follows:</p>
  
  <ol>
  <li><p>Start incognito Chrome, navigate to <a href="https://foo.mysite.com">https://foo.mysite.com</a> and have the JS on the page make a GET ajax request to S3 for <a href="https://s3.amazonaws.com/mystuff/file.json">https://s3.amazonaws.com/mystuff/file.json</a> . You get back a 200 response with:</p>
  
  <pre><code>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
  </code></pre></li>
  <li><p>Open a second tab, navigate to <a href="https://bar.mysite.com">https://bar.mysite.com</a> and have its JS make a GET ajax request to S3 for the same file <a href="https://s3.amazonaws.com/mystuff/file.json">https://s3.amazonaws.com/mystuff/file.json</a> . Get back the following 304 response:</p>
  
  <pre><code>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
  </code></pre></li>
  <li><p>Open a third tab, navigate to <a href="https://foo.mysite.com">https://foo.mysite.com</a> (the first site) and repeat the same steps as in 1. Chrome kills the response for CORS reasons and reports the following:</p>
  
  <pre><code>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.
  </code></pre></li>
  </ol>
  
  <p>What's the story here? This doesn't reproduce in Firefox. In Firefox I'm happily getting a 304 in both steps 2 and 3, which I would expect to see in Chrome as well.</p>
  
  <p>A temporary workaround for this issue in Chrome is to set <strong>Cache-Control: no-cache</strong> on the file in S3, but then I'm forcing our clients to be re-downloading that file for no good reason, so it's not a real solution.</p>
  
  <p>Is this intended and documented behavior? Is this a bug with Chrome? Any other thoughts?</p>