CORS Issue with loading images from 3rd party APIs

[tjslater]

I'm a new member and relatively new to WebGL, but professionally I'm an angular/node developer.

 

I'm currently setting up my Node server to proxy a 3rd party API in order to pull images and apply them as textures to meshes in my scene, but I can't get around the CORS issue that surrounds loading in the images. On the Node side, I've set the CORS (Access-Control-Allow-Origin) header, and everything else works fine, it's just with images I have a particular problem.

BABYLON.Tools.LoadImage(response.archivesimages[0].image_uri, function(){console.log('loaded')},function(item, err){console.log('error:', err, item, 'not loaded' );});

When I get the 'item' in the error return function, the image is there: 

<img crossorigin=​"anonymous" src=​"http:​/​/​cdn2.brooklynmuseum.org/​images/​opencollection/​archives/​size2/​S03i3079l01.jpg">​

As it should, yet I'm still getting the CORS error.

 

My response headers:

1. access-control-allow-headers:
   Content-Type, Authorization, Content-Length, X-Requested-With
2. access-control-allow-methods:
   GET,PUT,POST,DELETE,OPTIONS
3. access-control-allow-origin: * <- (I've also tried domain-specific settings here)

 

Am I missing a step? 

[GameMonetize]

 Did you try this:

var texture = new BABYLON.Texture(uri, scene);

[tjslater]

Sure, I've tried instantiating a new texture in the callback with the uri, still running into the same problem.

I've also tried loading the texture directly without an API call, using the URL directly.

 

So *a* solution I've found is instantiating a new Image(), setting the src from the uri, and setting the crossorigin manually. Then when I instantiate the new texture, I use the Image.src instead. I'm not sure why the ImageLoader, which essentially does the same thing, doesn't work for me, but I'm glad I found a solution.

//shorthandvar img = new Image();img.crossorigin = '';img.src = response.img.uri;var texture = new BABYLON.Texture(img.src, scene);

[GameMonetize]

Sounds good

[davrous]

This is weird as we're using CORS on babylonjs.com without any issue. The website is hosted on an Azure website and the geometries & textures somewhere else (blob storage) with CORS enabled. Babylonjs has been made to work into this scenario without any change. Did you try some network traces using Fiddler to check that your CORS rule is properly set?

[tjslater]

Hey thanks for replying - actually, my earlier fix ended up not working. So I'm definitely doing something wrong (or it's the API I'm calling?)

In my express settings:

res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

Does this look about right to you? Or perhaps there's another header I need to add? I shouldn't need to add anything specific to the route I wouldn't think.

Mind you, this issue is only coming up when trying to load the image in WebGL, it's working perfectly fine as an image on page.

There are other settings, but I don't think they'd be conflicting with my header settings.

[davrous]

What's your web server? IIS? Apache? I don't understand your res.header lines. Are you setting the CORS rule on the web server hosting your content? 

[tjslater]

I'm not hosting the content, I'm running a node-express server to route a 3rd party API to my own routes. I figured I had to do that to get around any other CORS issues, which it does, just not for WebGL.

exports.show = function (req, res) {    request({        url: [3rd party API url here] + req.params[slug from frontend API call] + '&format=json'    }, function (err, response, body) {        if (response) {            res.send(200, body);        }    });};

I've been reading a good deal about having to set CORS on the images themselves. I assume that's why the babylon imageloader sets the 'crossorigin=anonymous'. It's just not working, no matter what response headers I use. The only other way around this, that I can see, is to process all the images, turning them into base64 strings, and sending those instead of the json. I assume I'm hitting this issue because the original 3rd party API doesn't allow CORS on their images.

[tjslater]

Update:

 

So I figured out what I was doing wrong.

While I was pulling in the json data from a 3rd party api, the links to the images were still in another server that didn't allow CORS.

So what I'm doing is pulling in the data, converting it to base64, and sending a json object with a base64 image array to the frontend where I'm able to apply it.

The downside is, and I'm not entirely clear on this, is that Babylon doesn't seem to recognize Base64 images. I've been able to use them only in Three.js thus far.

Perhaps someone here will be able to clear that up? Because I can't find anything about trying to use base64 in Babylon. 

[GameMonetize]

This should work. Could you create a playground sample with a base64 image?