Jump to content

CORS Issue with loading images from 3rd party APIs


Recommended Posts

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:
  3. access-control-allow-origin: * <- (I've also tried domain-specific settings here)


Am I missing a step? 

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites



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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...