This is a bit more complicated than the accepted answer indicates.
The CORS support when using Cloudfront + S3 is actually implemented in S3 and it works like this according to Amazon:
The request's Origin header must match an AllowedOrigin element.
The request method (for example, GET or PUT) or the Access-Control Request-Method header in case the of a preflight OPTIONS request must be one of the AllowedMethod elements.
Every header listed in the request's Access-Control-Request-Headers header on the preflight request must match an AllowedHeader element.
This makes good sense, what may not be clear is that if no Origin header is sent by the client, then this processing isn't done at all. And we're using Cloudfront in front which, if you're just hosting static assets, you've probably set it up to ignore all headers when caching. Therefore if the first request to each file from a specific edge node doesn't include the Origin header, it will cache the response without the Access-Control-Allow-Origin header.
The result is that the first incoming request will determine which headers are returned for all requests until the cache expires.
There are several ways to fix/workaround this.
- Setup cloudfront to do conditional caching based on the "Origin" header.
This works fine if you expect only a few or a single origin, but otherwise your caching ratio could become really bad.
- Use Lambda@edge to forcibly set the headers, this can be done just once for each origin (S3) request.
Fully flexible, but adds overhead and cost.
- Make cloudfront override the "Origin" header to a dummy value for every request.
This is only really useful in the "Access-Control-Allow-Origin: *" case and it's a bit of a hack, but it's probably the best current solution when hosting static assets on cloudfront + S3.