The why is long-winded, but the short answer is: you can't. Not currently, anyway.
[TL;DR]
In S3, Vary
is not a user-configurable header. While S3 can deliver CORS headers, CloudFront does not have explicit support for it.
If your end-goal is to deliver CORS-enables content from CloudFront using S3 as your source, I ended up working around the issue by deploying an app that sits between S3 and CloudFront, which proxies the requests and always adds the correct CORS headers to S3's response so that CloudFront caches the correct data.
Pros:
- CloudFront caches the CORS response headers along with the S3 data.
- CloudFront continues to work with 100% performance.
- The proxy app is very small and can be run on a t1.micro.
Cons:
- Not as straightforward as S3+CloudFront working together properly for CORS requests.
- Writing and deploying the app.