CORS issues when adding 3D model

CesiumJS
1

Hello,

I’ve been encountering a CORS error when loading a 3D model in Cesium. The following code snippet loads the model fine when it’s a local path, but when it’s switched to a URL I receive the error. It doesn’t happen in other parts of the web application when accessing resources from a different server, only when using Cesium.

                                aircraft = viewer.entities.add({
                                    availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                                        start: start,
                                        stop: stop
                                    })]),
                                    position: positionProperty,
                                    orientation: orientationProperty,
                                    model: {
                                        **uri: 'https://xxx.azureedge.net/' + result2,**
                                        minimumPixelSize: 64
                                    },
                                    name: "Aircraft"
                                });

Thanks,
Nick

2

Does your server enable CORS? How are the other parts of your application are accessing this model? Are they running on the same domain that the CesiumJS app is running on?

3

Hello,

I can go down the route of checking the CORS settings on the server (it’s an Azure CDN), but URL’s are working successfully when accessing other assets outside of Cesium in the web app. It only seems to be an issue when adding a model through the code snippet below.

The 3D models and the web app are on different servers. Both on Azure, but different servers.

When I use the Moesif CORS Chrome plug-in for to disable CORS the models load fine which makes me think it’s a client/code issue.

I guess I’m not sure where I should be looking. I don’t want to go down a CORS rabbit hole if there’s some known restrictions when adding a model to an entity via a URL.

Cheers,
Nick

4

This suggests you need to enable CORS on the server that you’re requesting the asset from. There’s nothing a client can do to work around this if the server doesn’t have the CORS headers and the browser is blocking the request.

I’m not sure why you wouldn’t be experiencing the same restriction on other assets though. The only difference I can think of is if the glTF you’re loading has external assets (like textures/geometry) those may be requested in subsequent fetch requests, but that shouldn’t really work any differently.

5

Thanks Omar. I’ll look into CORS server settings on my end. Thanks for your help.