title: How do I handle CORS with html2Canvas and AWS S3 images?
body: <p>I know similar questions have been asked before but I still can't make it work. I have a <code>div</code> with images inside of it loaded from a bucket in AWS s3, they load perfectly no problem.</p>
  
  <p>Now I want to be able to save as a jpeg whatever is in that specific <code>div</code> (like taking a screenshot), the plugin <code>html2canvas</code> helps with that. The problem is that when I try to actually save it (or simply show immediately the result of such screenshot) I run into these issues:</p>
  
  <ul>
  <li><p>Canvas is tainted => I set <code>allowTaint: true</code> in the plugin but it would throw this error, so I disabled it and the error went away. I keep <code>useCORS</code> set to <code>true</code> though to allow images from another source.</p></li>
  <li><p>Access to image has been blocked by CORS policy</p></li>
  </ul>
  
  <p>In order to solve this I set up CORS on my AWS S3 bucket, but that didn't seem to work (or it worked partially). I noticed that the response header of those images don't have CORS metadata when the plugin uses them to generate the jpeg. I then tried to set <code>crossOrigin="anonymous"</code> in those images inside the <code>div</code> but it would throw a CORS error right away, which shouldn't happen since the AWS bucket has been set up for that as follows:</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;AllowedHeader&gt;Authorization&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>I am running out of options on how to make this work. Any idea on how to proceed from here would be very appreciated.</p>
  
  <p>EDIT: More details, I am using React and the images urls are retrieved from a server. This means that as soon as I get this array of urls I generate:</p>
  
  <pre><code>&lt;div&gt;
    { urls.map(url =&gt; &lt;img src={url} alt="some alt" /&gt;) }
  &lt;/div&gt;
  </code></pre>
  
  <p>If I add the <code>crossOrigin="anonymous"</code> I get the CORS error. If I leave that out, the images display but then the <code>html2canvas</code> plugin throws a CORS error as well when trying to generate the "screenshot".</p>
  
  <p>More details about the HTTP requests. So the first time I load an image inside the <code>div</code>, this is the Response Header:</p>
  
  <pre><code>Accept-Ranges:bytes
  Access-Control-Allow-Methods:GET
  Access-Control-Allow-Origin:*
  Cache-Control:max-age=2592000
  Content-Length:508208
  Content-Type:image/png
  Date:Thu, 16 Feb 2017 18:25:05 GMT
  Last-Modified:Wed, 15 Feb 2017 19:09:44 GMT
  Server:AmazonS3
  Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method 
  </code></pre>
  
  <p>Now this works if <code>crossOrigin='anonymous'</code> and the picture is not from the cache. If the <code>crossOrigin</code> attribute is not set I get:</p>
  
  <pre><code>Accept-Ranges:bytes
  Cache-Control:max-age=2592000
  Content-Length:508208
  Content-Type:image/png
  Date:Thu, 16 Feb 2017 19:03:53 GMT
  Last-Modified:Wed, 15 Feb 2017 19:09:44 GMT
  Server:AmazonS3
  </code></pre>
  
  <p>or it throws a CORS error on the console without showing any meta data on the response header. I tried adding a random string at the end of the url (<code>?somethingsomething</code>) so that they would never be grabbed from the cache, and that fixed the issue completely. But this is just a hack and it works for now but it is not definitely the solution I am looking for. I think Chrome is doing something with the cache and I have a hard time tracking the source of the issue, other than the fact that it's hard to reproduce this problem on my machine since it always retrieved the screenshot from cache even if I am using completely new images and disable/clear cache. It's very confusing.</p>