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.

Probably this article will be an interesting reading for you: [3 Problems AWS Needs to Address](http://blog.jacobelder.com/2012/05/3-problems-aws-needs-to-address/). — Alex Filipovici, Feb 02 '13 at 22:35
Alex: that was written in May '12 before they released CORS at all in Aug '12 - http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html — philfreo, Feb 03 '13 at 02:22
Have you changed anything recently? I just tried your curl request and it worked fine, returning the headers. If you haven't changed anything, maybe Amazon fixed a bug. — Charles Engelke, Feb 10 '13 at 15:49
Here's what's strange. I came back here the other day and it also worked for me on that one URL. Then I tried an updated version of the .js file (which I edited the question to show) -- that updated version of the .js didn't work! But now that one works for me too. So there is some (very long) delay before it starts working... — philfreo, Feb 10 '13 at 17:05
According to: https://forums.aws.amazon.com/thread.jspa?messageID=441856&tstart=0#441856 https://forums.aws.amazon.com/thread.jspa?messageID=441749&tstart=0#441749 https://forums.aws.amazon.com/message.jspa?messageID=447737#447737 In April 2013 they started adding `Vary: Origin` to the S3 response headers, meaning this issue is half fixed, but still waiting on Cloudfront to properly support the Vary header for it to actually be fixed. — philfreo, Aug 01 '13 at 20:19

score 3 · Answer 1 · answered Feb 24 '13 at 08:52

I think that the problem you are having is caused by CloudFront's lack of native support for CORS. At this time they do not support Vary on the Origin header so it's possible that CloudFront delivered an old cached response that did not have the correct CORS headers for your second request (with accept encoding: gzip).

Have a look at this thread on the AWS forum for a workaround to this missing CORS support:

https://forums.aws.amazon.com/message.jspa?messageID=422504#422532

sweet!, ive bumped in [this demo](http://matthewgbaldwin.com/), explain the same thing as well :) — user980085, Mar 08 '14 at 05:56

score 2 · Accepted Answer · edited May 23 '17 at 12:26

2

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.

edited May 23 '17 at 12:26

Community

1
1

answered Jun 27 '14 at 19:46

Brett

3,478
1
22
23

score 0 · Answer 3 · answered Apr 16 '13 at 23:04

This might help for you as I've successfully gotten CORS to work on S3 and Cloudfront. I noticed the first time S3 and Cloudfront pull files they pretty much cache the headers, even after you've changed them. Be sure "query param" versioning is enabled and you can add ?v=1 to the end of your file. This "updated" the headers for us and CORS was all good.

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

3 Answers3

Linked