I'm trying to load a texture but i keep getting this error no matter what i do:

Access to Image at '<file-path>/IMG/1.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Here's the code i'm using to load the image:

var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
var url = "IMG/1.jpg";
var materials = [
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
];

I'm trying to load a texture but i keep getting this error no matter what i do:

Access to Image at '<file-path>/IMG/1.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Here's the code i'm using to load the image:

var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
var url = "IMG/1.jpg";
var materials = [
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
];

• javascript
• three.js
• textures

• What is <file-path>? Is this from the same domain? – Ilia Ross Commented Feb 13, 2018 at 11:12
• <file-path> is the path to the file, i omitted it in here but i checked the link from the error message and the file is definitely there – chrisstar123 Commented Feb 13, 2018 at 11:14
• What do you mean by path? What your path starts with? – Ilia Ross Commented Feb 13, 2018 at 11:17
• 1 @SunnySoni this is for a school assignment where we have to make a scene in webgl using three.js. One of the requirements is that we use texture mapping and we need to use local images for that because we have to hand it in at some point – chrisstar123 Commented Feb 13, 2018 at 11:25
• 1 Why don't you use relative URL, without file:///D:/ in the proper context? – Ilia Ross Commented Feb 13, 2018 at 11:25

3 Answers 3

If the file is local you need to run a local server. It's simple in will take just a minute or so.

If the file is not local the server itself needs to give permission. Some servers like github pages do this by default. So does imgur and flickr.

Otherwise if it's a server you control you need to configure it to give permission. Every server (apache, nginx, caddy, iis, etc) are all configured differently and you'll need to search for how based on which server you're using. If it's not a server you control then you need to ask the people that do control it to configure it to give CORS permissions

Cross origin images are not just a matter of setting crossOrigin. All that does is tell the browser you want to ask the server for permission to use the image. It's still up to the server to actually grant that permission. Most servers by default do NOT grant permission and have to be configured to add that permission.

Try this: loader.setCrossOrigin('anonymous');

I fixed it by using a different browser than google chrome.

The reason why i couldn't use a local server was because this was a school assignment. The people that were going to grade it weren't going to run a local server to make it work. They'd just open it, see it doesn't work and subtract points.