Why is CloudFront varying CORS headers response based on Accept-Encoding?

Question

I'm trying to get CORS to work properly with Amazon S3 + CloudFront.

After setting my CORS Configuration, it seems to work properly:

$ curl -H "Origin: https://app.close.io" -I "https://d4389n07pf8cq.cloudfront.net/built/app.9e1f9ee9.js" -s | grep Access  
Access-Control-Allow-Origin: https://app.close.io
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true

But when the resource is requested with Accept-Encoding: gzip then the CORS headers aren't returned properly.

$ curl -H "Origin: https://app.close.io" -H "Accept-Encoding: gzip" -I "https://d4389n07pf8cq.cloudfront.net/built/app.9e1f9ee9.js" -s | grep Access 
(nothing)

Why is that?

My CORS configuration looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://app.close.io</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
        <AllowedHeader>Accept-Encoding</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

(I've also tried a CORS configuration with the Accent-Encoding header removed.)

The S3 object itself is gzipped, and has "Metadata" of Content-Encoding: gzip, Cache-Control: public, max-age=31536000, and Content-Type: application/javascript.

I don't understand why CloudFront+S3 CORS isn't working properly when requesting gzip.

Answer 1

On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so I added some instructions on this question reflecting how we got it set up right.