Webworker cross origin vite viteStaticCopy

fa_yang · April 26, 2024, 2:59am

use vite project, viteStaticCopy to copy cesium statics
when cross origin, other assets is ok, but the webwork goes wrong.

1.what i a encounter(Problem Description)

I am developing an SDK based on Cesium within a Vite project. After using viteStaticCopy to copy all of Cesium’s static files, I encounter a problem when accessing these files from another Vite project (running on a different localhost port). While images do not trigger any cross-origin issues, web workers do face these problems. However, when I use the official Cesium build package, no cross-origin issues arise at all!

2.project files

2.1 sdk vite project

viteMapSdkJs.zip (25.3 MB)

2.2 request html file(use another localhost port!)

testThree.zip (655 Bytes)

2.2.1 run the testThree.html in the other local port or use vscode liveServer

2.3 when i use the cesium official build, everything is ok

2.4 when i use my vite build, then webwork cross origin!

the error text conetent as follow:
SecurityError: Failed to construct ‘Worker’: Script at ‘http://localhost:5178/dcjtMaps/Workers/createVerticesFromQuantizedTerrainMesh.js’ cannot be accessed from origin ‘http://127.0.0.1:5500’.

3.I know run in the same origin or proxy can fix this problem,but my requirements must run in diffrent origin and can’t use proxy

because i use the sandpack, the sand pack will sead the code to the remote server!
and i think there must something run in my vite sdk project

4. Thank you my frinds!

fa_yang · April 26, 2024, 3:45am

My vite.config.js

fa_yang · April 29, 2024, 7:48am

any one see this please？

Levi_Montgomery · April 30, 2024, 2:51pm

Can you please upload the repos to github and link here so that I do not have to download a zip file

Levi_Montgomery · April 30, 2024, 6:06pm

Unfortunately I have the same issue (angular/module federations as a microfrontend) and my only workaround is to simply copy all the assets and scripts into the host app. Not ideal because it’s a bunch of assets in the platform app that are supposed to be contained in the MFE.

fa_yang · May 1, 2024, 11:34am

Thank you very much for your response. What confuses me is why the official Cesium.js package works fine, but the one I packaged myself doesn’t.

Levi_Montgomery · May 1, 2024, 1:38pm

This is a CORS error that happens when you try to access resources from another origin, and web workers are under more strict restrictions than things like images and assets. Can you check to see if that
.js file is coming from port 5178 when you’re on localhost:5500 when using official package? You should be able to see this from the network tab in the chrome debug tools.

If the script is somehow coming from 5500 then that explains why there’s no CORS issue.

I’m not sure there is a way to fix it ultimately without making changes in Cesium itself. The goal would be to set up cross origin resource sharing by modifying the header on Cesium’s response with the worker, or to avoid CORS and get the worker to run on the origin host somehow.

fa_yang · May 6, 2024, 9:43am

thank you @Levi_Montgomery

cejune · May 8, 2024, 12:08pm

I have also encountered this problem, may I ask how you solve it? I also need to carry out an encapsulation on cesium, thank you