THREE.js: Cross-origin image load denied by Cross-Origin Resource Sharing policy
canvas, cors, cross-domain, javascript, three.js
Solution
I fixed this problem by installing Node.js and running a local server to open this html!
Problem
My Chrome version is 31.0.1650.57 I'm learning THREE.js and downloaded a planet sample from https://github.com/jeromeetienne/threex.planets/ But when I run the earth.html a strange error happens as the title says: ``` THREE.WebGLRenderer 59 three.min.js:424 Cross-origin image load denied by Cross-Origin Resource Sharing policy. earth.html:1 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data. threex.planets.js:73 (anonymous function) threex.planets.js:73 ``` I looked through the code and find something that might be related to this error: ``` THREEx.Planets.baseURL = '../' ... map: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'), ``` But I don't know how to fix it, I'm relatively new to javascript, hope someone would help me out! Thanks a ton!