amazon s3 - Correct S3 + Cloudfront CORS Configuration?

Question

My application stores images on S3 and then proxies them through Cloudfront. I'm excited to use the new S3 CORS support so that I can use HTML5 canvas methods (which have a cross-origin policy) but can't seem to configure my S3 and Cloudfront correctly. Still running into "Uncaught Error: SECURITY_ERR: DOM Exception 18" when I try to convert an image to a canvas element.

Here's what I have so far:

S3

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>MY_WEBSITE_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>MY_CLOUDFRONT_URL</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>

Cloudfront

Origins

Origin Protocol Policy: Match Viewer

HTTP Port: 80

HTTPS Port: 443

Behaviors

Origin: MY_WEBSITE_URL

Object Caching: Use Origin Cache Headers

Forward Cookies: None

Forward Query Strings: Yes

Is there something I'm missing here?

UPDATE : Just tried changing the headers to

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

based on this question Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

Still no go.

UPDATE: MORE INFO ON REQUEST

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

UPDATE

I think maybe my request wasn't correct, so I tried enabling CORS with

img.crossOrigin = '';

but then the image doesn't load and I get the error: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Answer 1

On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so now you just

1. Set a CORS Configuration for your S3 bucket including

   <AllowedOrigin>*</AllowedOrigin>

2. In CloudFront -> Distribution -> Behaviors for this origin

   • Allowed HTTP Methods: +OPTIONS
   • Cached HTTP Methods +OPTIONS
   • Cache Based on Selected Request Headers: Whitelist the Origin header.

3. Wait for ~20 minutes while CloudFront propagates the new rule

Now your CloudFront distribution should cache different responses (with proper CORS headers) for different client Origin headers.