[SOLVED] CORS Error coming from PlayCanvas Engine

Help & Support
1

Hi there! I’m getting the following error:

playcanvas-stable.min.js:6 Uncaught DOMException: Failed to execute ‘texImage2D’ on ‘WebGL2RenderingContext’: The image element contains cross-origin data, and may not be loaded.
at t.upload (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:380589)
at i.setTexture (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:407617)
at i.draw (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:409129)
at t.drawInstance (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:514453)
at t.renderForwardInternal (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:520047)
at t.renderForward (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:520267)
at t.renderRenderAction (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:527680)
at t.renderPassRenderActions (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:526561)
at e.execute (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:525400)
at t.render (https://venues.gevme.com/9c7725c8-24d9-4bf1-a5a1-02395a501044/space/scripts/playcanvas-stable.min.js:6:477044)

From the playcanvas engine once per frame. None of the textures come from outside the project, however. They are all loaded with the project in question. And they all share the same domain as the project itself.

I’m at my wits end on how to solve this issue. Somehow the engine identifies all texture images as different-origin and throws this error. I tried adding a mitigator on my first-run script:

pc.app.loader.getHandler(“material”).crossOrigin = “anonymous”;
pc.app.loader.getHandler(‘texture’).crossOrigin = ‘anonymous’;
pc.app.loader.getHandler(‘json’).crossOrigin = ‘anonymous’;
this.app.loader.getHandler(“material”).crossOrigin = “anonymous”;
this.app.loader.getHandler(‘texture’).crossOrigin = ‘anonymous’;
this.app.loader.getHandler(‘json’).crossOrigin = ‘anonymous’;

But it doesn’t work. Any help is appreciated!

To clarify: This error doesnt happen when launching from the editor, only when deploying to our hosting.

2

Just to confirm, publishing to playcanv.as works fine as well?

If so, it sounds like a server configuration issue on your end. I think I sometimes see this where the URL to access the app is different to where the file are actually hosted (eg a S3 bucket or CDN).

This page should help with that: Hosting using a CDN | Learn PlayCanvas

3

Can you share the URL where it’s being hosted please? I might be able to investigate a bit more here.

4

Hi Yaustar, thanks for responding!

I was able to solve the problem by going into the playcanvas engine js and forcing every instance of crossOrigin to “anonymous”. It was a moonshot but it worked! No more CORS issue!

1 Like