Three js texture loading. Access to image from origin 'null' has been blocked by CORS policy

Question

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)
    }),
];

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, Feb 13 '18 at 11:14
Seemingly you are requesting file from different domain with JS. see this: https://stackoverflow.com/a/20035319/2684945 — Sunny Soni, Feb 13 '18 at 11:18
@chrisstar123 We might mean different things by _path_ term. Please show it as it is but you can fake actual names. — Ilia Ross, Feb 13 '18 at 11:20
file:///D:/someFolder/someOtherFolder/IMG/1.jpg is what the path looks like — chrisstar123, Feb 13 '18 at 11:20
Buddy, its good if you use a HTTP server and not the absolute path to file. — Sunny Soni, Feb 13 '18 at 11:23
@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, Feb 13 '18 at 11:25
Why don't you use relative URL, without `file:///D:/` in the proper context? — Ilia Ross, Feb 13 '18 at 11:25
@IliaRostovtsev as you can see in the code example i did use a relative url — chrisstar123, Feb 13 '18 at 11:26
@chrisstar123 Actually I don't, as term _path_ doesn't have to be used here. You must send correspondent header by your web-server, to bypass cross-origin. — Ilia Ross, Feb 13 '18 at 11:28
I am not asking you to use a remote server, use a local HTTP server — Sunny Soni, Feb 13 '18 at 11:28
In case you don't care about security, set the headers by your webserver `header('Access-Control-Allow-Origin: *')`. — Ilia Ross, Feb 13 '18 at 11:31
@IliaRostovtsev i think if we loads the file from same hosting directory of a HTTP server then it should not be needed to send any header for cross origin support. — Sunny Soni, Feb 13 '18 at 11:33
Yes if requesting file and resource is in the same hosting directory then origin is also same. — Sunny Soni, Feb 13 '18 at 12:26

score 3 · Answer 1 · answered Feb 13 '18 at 14:43

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.

score 1 · Answer 2 · edited Feb 13 '18 at 14:46

1

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

edited Feb 13 '18 at 14:46

Robert Columbia

6,313
15
32
40

answered Feb 13 '18 at 11:22

Simon Pasku

539
2
4
17

1

I have tried this, it doesn't work, the error in the console is the same – chrisstar123 Feb 13 '18 at 11:22
then your server seem`s block any request from different domain, you should allow cross origin on your server like here for php https://enable-cors.org/server_php.html – Simon Pasku Feb 13 '18 at 11:38

score 1 · Accepted Answer · answered Feb 23 '18 at 14:50

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.

Three js texture loading. Access to image from origin 'null' has been blocked by CORS policy

3 Answers3