title: AWS S3 bucket: CORS Configuration
body: <p>I am trying to download an image from S3. But I got error CORS.</p>
  
  <p>What I have done:</p>
  
  <p>-Setup CORS configuration for S3 bucket: </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
  &lt;CORSRule&gt;
  &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
  &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
  &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
  &lt;AllowedMethod&gt;PUT&lt;/AllowedMethod&gt;
  &lt;AllowedMethod&gt;HEAD&lt;/AllowedMethod&gt;
  &lt;ExposeHeader&gt;Accept-Ranges&lt;/ExposeHeader&gt;
  &lt;ExposeHeader&gt;Content-Range&lt;/ExposeHeader&gt;
  &lt;ExposeHeader&gt;Content-Encoding&lt;/ExposeHeader&gt;
  &lt;ExposeHeader&gt;Content-Length&lt;/ExposeHeader&gt;
  &lt;ExposeHeader&gt;Access-Control-Allow-Origin&lt;/ExposeHeader&gt;
  &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
  &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>-I uploaded an image using AWS console</p>
  
  <p>-load image in html:</p>
  
  <pre><code>&lt;div id="my-node"&gt;
     &lt;img id="image" src="path/to/s3/bucket/image.png" class="img-responsive"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>-To download image, I use <a href="https://github.com/tsayen/dom-to-image" rel="nofollow noreferrer">https://github.com/tsayen/dom-to-image</a> to download</p>
  
  <pre><code>domtoimage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {
      window.saveAs(blob, 'my-node.png');
  });
  </code></pre>
  
  <p>Result: 
  I received error </p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load path/to/s3/bucket/image.png. No
    'Access-Control-Allow-Origin' header is present on the requested
    resource.</p>
  </blockquote>
  
  <p>I inspected the image, the response header not including Access-Control-Allow-Origin (it seems S3 didn't include CORS configuration in response)</p>
  
  <pre><code>Accept-Ranges:bytes
  Content-Length:124824
  Content-Type:image/png
  Date:Mon, 24 Apr 2017 17:27:48 GMT
  ETag:"xxxxxxxx00000000"
  Last-Modified:Mon, 24 Apr 2017 17:18:53 GMT
  Server:AmazonS3
  x-amz-id-2:xxxxxxxxxxxxxxxxx
  x-amz-request-id:xxxxxxxxxxxx
  </code></pre>
  
  <p>Very appreciated for any suggestion or advice</p>