[SOLVED] Security Error setting source of texture - Edge/Mobile

Help & Support
1

I am loading textures from my database which do not have file extensions, so I load them with the following code:

storage.ref(storageUrl + "/" + data.diffuse).getDownloadURL().then(function(url) {
    var tex = new pc.Texture(app.graphicsDevice, {});

    var img = document.createElement('img');
    img.src = url;
    img.crossOrigin = 'anonymous';
    img.onload = function(e){
        console.log(img);
        tex.setSource(img); //Setting this triggers the SecurityError
        for (var i = 0; i < meshInstances.length; ++i) { 
            var mesh = meshInstances[i];
            mesh.material.diffuseMap = tex;
            mesh.material.update();
        }
    };
});

On Desktop in Chrome and Firefox this seems to work fine, but in Edge it always errors with a Security Error. On mobile browsers it only sometimes happens, but it got me to inspect the page using chrome debugger and it is a CORS error.
I have also tried adding this.app.loader.getHandler("texture").crossOrigin = "anonymous"; but it didn’t change anything.
The img tag in the html does properly display the texture from that url.

Would anyone know how to fix this? :confused:

2

To fix a CORS error you will have to setup your server to serve your assets with CORS enabled.

Depending on your server type, you can find a lot of resources on how to do this. Here is a site dedicating in providing support for that, and also they have a test tool to check if your urls are CORS enabled or not:

https://enable-cors.org/

3

I have properly configured CORS on my database (it’s Firebase), so it does load the image in the img tag. The error happens when I set the source to that element. I am running it through the editor play button, so does that server not have CORS configured properly?

4

I imagine you are using Google Firestore and that’s how you serve your images.

No, Google Firestore by default doesn’t allow CORS to be enabled so you will have to enable it for the domain names that you are using (e.g. playcanvas.com for launch builds, playcanv.as for publised builds etc).

Here is a guide to get you started:

https://cloud.google.com/storage/docs/cross-origin

5

I have done that before, but figured I’d try reset it. After messing up the file it gives this error:

ApplicationFrameHost_WPQEJiVrgJ
ApplicationFrameHost_WPQEJiVrgJ.png1155Ă—255 21 KB

(translated: The origin playcanvas hasnt found playcanvas in the Acces-Control-Allow-Origin-response header), after readding the origins this error persists:
image (playcanvas-stable.dbg.js (5635,12)) on MS Edge, and this on my phone’s Chrome: image

6

Sorry, this is something on the Google Storage side and not playcanvas related.

Setting up CORS can be a tricky business initially but definitely is required for cross domain apps to be able to load remote resources. Try contacting Google support on that to help you configure your Google bucket correctly.

7

Actually I just figured it out and it is absolutely stupid :stuck_out_tongue:
Before setting the src of the img tag, you should first configure the crossOrigin property. So swapping these two lines solved it immediately… :man_facepalming:

2 Likes
8

That’s great! Fighting CORS can be frustrating for a while :wink:

1 Like