title: Correct S3 + Cloudfront CORS Configuration?
body: <p>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.</p>
  
  <p>Here's what I have so far:</p>
  
  <p><strong>S3</strong></p>
  
  <pre><code>&lt;CORSConfiguration&gt;
    &lt;CORSRule&gt;
      &lt;AllowedOrigin&gt;MY_WEBSITE_URL&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
      &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
    &lt;/CORSRule&gt;
    &lt;CORSRule&gt;
      &lt;AllowedOrigin&gt;MY_CLOUDFRONT_URL&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
    &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p><strong>Cloudfront</strong></p>
  
  <p>Origins</p>
  
  <pre><code>Origin Protocol Policy: Match Viewer
  
  HTTP Port: 80
  
  HTTPS Port: 443
  </code></pre>
  
  <p>Behaviors</p>
  
  <pre><code>Origin: MY_WEBSITE_URL
  
  Object Caching: Use Origin Cache Headers
  
  Forward Cookies: None
  
  Forward Query Strings: Yes
  </code></pre>
  
  <p><strong>Is there something I'm missing here?</strong></p>
  
  <p>UPDATE :
  Just tried changing the headers to </p>
  
  <pre><code>&lt;AllowedHeader&gt;Content-*&lt;/AllowedHeader&gt;
  &lt;AllowedHeader&gt;Host&lt;/AllowedHeader&gt;
  </code></pre>
  
  <p>based on this question <a href="https://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa">Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading</a></p>
  
  <p>Still no go.</p>
  
  <p>UPDATE: MORE INFO ON REQUEST</p>
  
  <pre><code>Request
  URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
  Request Method:GET
  Status Code:200 OK (from cache)
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>I think maybe my request wasn't correct, so I tried enabling CORS with</p>
  
  <pre><code>img.crossOrigin = '';
  </code></pre>
  
  <p>but then the image doesn't load and I get the error: Cross-origin image load denied by Cross-Origin Resource Sharing policy.</p>