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?

Answer 1

如果您从localhost运行Chrome并使用Three.js，则可能需要使用此命令行标记运行Chrome：

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

Answer 2

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.}

Answer 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.

Answer 4

您还可以通过从根文件夹运行以下命令来使用python运行简单的HTTP服务器。

python -m SimpleHTTPServer 8000

Answer 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.

Answer 6

this worked for me at the command line\\terminal:

./chrome.exe --disable-web-security

*note that you must close all instances of chrome before executing the command for it to work.

Answer 7

Perfect solution for:

THREE.js: Cross-origin image load denied

Just add timestamp to the image url. I don't know the logic behind it, but it works.

Example:

var material = new THREE.MeshBasicMaterial({
  map: loader.load(url + "?v=" + (new Date()).toString(), function() {
    animate();
  })
});