title: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at "https://xxxx.xxxx" may not be loaded
body: <h3>Chrome shows:</h3>
  
  <blockquote>
    <p>DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at "<a href="https://xxxx.xxxx/models/skin.png" rel="nofollow noreferrer">https://xxxx.xxxx/models/skin.png</a> " may not be loaded.</p>
  </blockquote>
  
  <p>The project work like this:</p>
  
  <blockquote>
    <p>--index.html<br>
     --live2d.js<br>
     --models (folder)<br>
     ---| model.json<br>
     ---| skin.png  </p>
  </blockquote>
  
  <p>This <code>model.json</code> defined the pictures needed in the model, and the <code>live2d.js</code> get data from <code>model.json</code> and make the model animate.</p>
  
  <p>If I put these in my main domain, everything works well, but when I tried to load these from my CDN domain (means load only <code>index.html</code> from maindomain, but load other files from CDN), I got this:</p>
  
  <p><a href="https://i.loli.net/2017/12/09/5a2b7e3b6288f.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>But as you can see, although I belive I've set cross-origin of CDN server well, and the <code>live2d.js</code> and <code>model.json</code> load from CDN domain normally, only the picture getting wrong. </p>
  
  <p>I've searched for a while, like <a href="https://stackoverflow.com/questions/25291959/securityerror-for-same-origin-image-teximage2d">this</a>, but my problem is pretty different, cause all my files were load from a server, include <code>index.html</code>.</p>