Cross-origin image load denied on a local image with THREE.js on Chrome

Question

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

Answer 1

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

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