Cross-origin image load denied with three.js in chrome

Question

Trying to add material in THREE.js like this

var materialWall = new materialClass( { color: 0xffffff, map: THREE.ImageUtils.loadTexture( 'images/a.png' ) } );

It works fine in Chrome, IE, FF, until 3 days ago, after Chrome updated itself to the latest dev version 17.

Chrome 17 just doesn't load the image and complains the following

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

That's insane since the image is clearly in the same domain, so is this an issue of chrome or THREE.js or something else?

Solution 1

https://github.com/mrdoob/three.js/issues/687 refers to an issue on three.js' GitHub, which has good list of workarounds, including a link to a wiki page describing how to run locally. There are also some other workarounds in the thread, including adding the following to your scripts:

THREE.ImageUtils.crossOrigin = "";

Or, adding CORS headers so that they are specifically allowed.

^{Note that most of this information was added from the already existing link to the issue, which the original author of this answer did not include.}

Solution 2

If you are running Chrome from localhost and using Three.js, you probably need to run Chrome with this command line flag:

c:// ... /chrome.exe --allow-file-access-from-files

Solution 3

If you:

• don't want to set up your own server, and
• don't want to downgrade your browser's security

then I worked out a way around this which involves only a little bit of effort:

1. Convert the image into Base64 text
2. Store it in an external Javascript file
3. Link it to your project page
4. Load it into your texture

Full details can be found at http://tp69.wordpress.com/2013/06/17/cors-bypass/ for those that are interested.

Solution 4

You can also run a simple HTTP server using python by running the following command from your root folder.

python -m SimpleHTTPServer 8000

Solution 5

1) Chrome shortcut -> Properties -> Shortcut tab -> target and add --allow-file-access-from-files in target at last. (kill all the chrome tasks before doing this.)

OR

2) Download Mongoose web server software. Put it in your working directory, and run it. It will open in the browser http://localhost:PORT where it will serve all your files.

OR

3) You can also use NodeJS server in your application.

View more solutions

Comments

[keyle]

I am still having that issue today - do you know if this has been fixed or .. ? I'm up to date... Any work around??

[Jules G.M.]

alright but the users will not be running that command.. this doesn't look like a viable solution to me

[Syroot]

Best way to fix it today, more than a year later?

[ajahongir]

how to apply this in ubuntu?

[ken]

for Mac: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

[Nic]

Please don't let your answer be nothing but a link. Include the relevant details in your answer so that if the link dies (say, if the project is moved to another account [and you forget to change this link], or renamed, or that particular issue is deleted, or GitHub changes their naming convention, or...) your answer still has some value.

[Heretic Monkey]

@QPaysTaxes Unfortunately this user was Last seen Nov 20 '11 at 14:08...

[belzebu]

this doesn't work and I'm not sure how would that prevent the CORS error. The only thing it prevents is the caching. Also you'd be better of with (new Date()).getTime() rather than "toString()"