TextureLoader with external image link CORS

Questions
1

I am trying to load an external image into a texture loader and returns this errors:

The image.... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://inbounder-69680.firebaseapp.com' is therefore not allowed access.

Searching on google I have tried this with same result:

    var loader = new THREE.TextureLoader();
    //allow cross origin loading
    loader.crossOrigin = '';

    var texture = loader.load('https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');

What would be wrong?

2

I may be wrong. But try setting loader.setCrossOrigin('anonymous')

3

Same problem.

Is necessary to add other headers in the html?

The html of the threejs is hosted on firebase cloud functions

4

You may have to solve it with your server itself.
Look for .htaccess file and try to configure “Access-Control-Allow-Origin” : *

If its only for testing, try out this extension

5

Maybe:

6

Or:

7

My solution was allow origin to firebase on firebase server. Thanks

8

Is posible to make transparent the plane until the image is loaded?. Now the plane is black

9

Looking into the code, it creates HTMLImage node.
loader.crossOrigin = null ( instead of ‘’ )
will remove the attribute. It did the trick for me.