6

I'm using THREE.js and I get this error in the developer console:

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

when I open my script with Chrome. The code looks like this:

var particle_system_material = new THREE.ParticleSystemMaterial({
    color: 0xffffff,
    map: THREE.ImageUtils.loadTexture("images/circle.png"),
});

So as you can guess, the:

map: THREE.ImageUtils.loadTexture("images/circle.png");

is the problem. With Firefox it works very well.

I've read the tips in the following links : Chrome, three.js: Cross-origin image load denied, https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally, https://www.google.fr/search?q=Access-Control-Allow-Origin

I also realized the commands given:

Start Chrome executable with a command line flag:

chrome --allow-file-access-from-files

nothing works and I'm going crazy. It is just an image on my hard drive with HTML and JS files, no server, no "origin".

Community
  • 1
  • 1
Mizur
  • 440
  • 4
  • 16

2 Answers2

2

Are you running a local server, or are you just opening the html file?

Most likely, running a localhost server will fix this issue. Mamp / Wamp are super easy to use.

If that doesn't work, you can do something drastic like chrome --disable-web-security

posit labs
  • 7,733
  • 4
  • 32
  • 57
  • It is just a HTML file. I tried with Wamp, but it doesn't change anything :/ concerning `chrome --disable-web-security`, I saw somewhere that it could cause problems with some malware on the internet, no ? – Mizur Nov 21 '13 at 00:05
  • Yeah, I wouldn't recommend using it all the time. Just use it when you're working on this stuff. – posit labs Nov 21 '13 at 00:21
2

Keep in mind that if you start chrome with the disable web security flag, you must first shut down all other instances of chrome in order for it to work as you expect.

beiller
  • 3,025
  • 1
  • 9
  • 17