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?

score 13 · Answer 1 · answered Apr 11 '12 at 02:58

13

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

answered Apr 11 '12 at 02:58

Orbiting Eden

1,522
13
16

4

alright but the users will not be running that command.. this doesn't look like a viable solution to me – Jules G.M. Mar 07 '13 at 04:03
1

how to apply this in ubuntu? – ajahongir Feb 21 '14 at 11:08
1

for Mac: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files – ken Sep 29 '14 at 14:19

score 12 · Accepted Answer · edited Oct 05 '16 at 17:14

12

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

edited Oct 05 '16 at 17:14

Heretic Monkey

11,687
7
53
122

answered Nov 05 '11 at 09:54

Mr.doob

523
4
4

I am still having that issue today - do you know if this has been fixed or .. ? I'm up to date... Any work around?? – keyle Apr 09 '12 at 12:32
Best way to fix it today, more than a year later? – Ray Nov 05 '13 at 18:31
1

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. – Nic Oct 05 '16 at 03:44
@QPaysTaxes Unfortunately this user was *Last seen Nov 20 '11 at 14:08*... – Heretic Monkey Oct 05 '16 at 16:43

score 7 · Answer 3 · answered Jun 17 '13 at 10:08

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:

Convert the image into Base64 text
Store it in an external Javascript file
Link it to your project page
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.

score 2 · Answer 4 · answered Dec 09 '16 at 09:28

2

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

python -m SimpleHTTPServer 8000

answered Dec 09 '16 at 09:28

Santosh

2,093
1
15
21

Swapnil Hadge · Answer 5 · 2018-05-17T13:47:35.843

1

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.

edited May 17 '18 at 13:47

answered May 17 '18 at 12:54

Swapnil Hadge

91
1
3

score 0 · Answer 6 · answered Dec 29 '14 at 04:49

0

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.

answered Dec 29 '14 at 04:49

Ice101781

105
10

score 0 · Answer 7 · edited Sep 20 '16 at 12:07

0

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();
  })
});

edited Sep 20 '16 at 12:07

Class Skeleton

2,913
6
31
51

answered Sep 20 '16 at 09:30

RAFI SHAIK

3
2

2

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()" – belzebu Oct 09 '16 at 20:56

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

7 Answers7

Linked