S3 CORS, always send Vary: Origin

Question

I am using an S3 bucket behind Cloudfront with CORS enabled. If the client makes a request with the Origin header, then S3 (and cloudfront) respond with a \"Vary: Origin\" h

Answer 1

Another solution would be configuring your CloudFront distribution to automatically turn Non-CORS requests into CORS requests. This is possible by adding a CORS header to each request CloudFront sends to S3 using the recently added CloudFront feature "Control Edge-To-Origin Request Headers".

See the feature announcement here: https://aws.amazon.com/blogs/aws/cloudfront-update-https-tls-v1-1v1-2-to-the-origin-addmodify-headers/

And the documentation here: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/forward-custom-headers.html.

Answer 2

I made an account just to answer your question, because there are very few good answers around for this kind of problem (and a few related ones).

The problem you describe happens for some reason primarily in chrome, FF and IE seems to be smart enough not to share cache between AJAX and regular calls in these instances.

The Problem

Lets first describe why the problem happens for future readers:

• Browser (Chrome) ask the server using a regular <img> or <script> tag. If the server is in the same domain it does not includes an CORS headers.
• Server (S3) returns the resource. If no Origin header was present in the request it does not attach CORS headers in the reply as they are redundant.
• Browser (Chrome) try and get the resource again using AJAX, but this time doesn't really go to the server but looks at the cached resource.
• Browser (Chrome) The cached version does not have CORS headers. It will drop the request as Access-Control-Allow-Origin violation or other related problems.

The solution

In HTML5 there is an attribute called crossorigin that can be added to tags to signify that they need to send origin information. Possible values are crossorigin='anonymous' and crossorigin='use-credentials' these are quite irrelevant to the question asked but as it says in the documentation:

By default (that is, when the attribute is not specified), CORS is not used at all.

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

So just create your image tags like this <img src='cloundfront.path' crossorigin='use-credentials'>

Thats it. Its quite obscure so I hope that this answer saves some research time to a bunch of people.