title: CORS error with THREE.js and S3 in Chrome & Safari
body: <p>I'm having an issue loading an S3 hosted JPG into my three.js model as a texture. I got a CORS error in Chrome, realised S3 supports CORS and put in a very liberal policy to check it out during development (I've never run into CORS before). Firefox is fine but Chrome and Safari still error out.</p>
  
  <p>The JPG is loaded into a texture via THREE.ImageUtils.loadTexture() and then that texture is applied to a material.</p>
  
  <p>I tried adding the following to the image before loading but it didn't seem to work:</p>
  
  <pre><code>img.crossOrigin = '';
  </code></pre>
  
  <p>The current CORS policy I have is wide open: </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;PUT&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;HEAD&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;DELETE&lt;/AllowedMethod&gt;
      &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>Chrome's error is</p>
  
  <pre><code>38 Cross-origin image load denied by Cross-Origin Resource Sharing policy.
  </code></pre>
  
  <p>Can anyone give me any tips on this please?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>So it turns out that I just wasn't setting img.crossOrigin early enough in the code for it to be useful. Stupid mistake :(</p>
  
  <p>The AllowHeader tips are useful though, thanks!</p>