manfredsteyer / module-federation-plugin-example

264 stars 182 forks source link

Workers in remote (CORS problems) #31

Closed Ketec closed 1 year ago

Ketec commented 1 year ago

After spending a day testing various solutions where workers are in a remote I was left without a solution (not monorepo, can't directly access from shell).

Currently, if remote app sets up a Worker: new Worker(new URL('./test.worker', import.meta.url), {type: 'module'}); It gets blocked by CORS since the remote runs on a different port (or possibly domain in prod deployments).

And even if you could solve it in prod, running on the same domain on a webserver but a different path - local development will still be impossible with dev servers/ng serve.

I tried a few approaches (corsworker, dynamic scripts/fetch) to "preload" as a Blob. However, these do not work with import.meta.url. The URL does not get correctly replaced in runtime (you get file:/// which is not available and also blocked by cors).

One option I could think of is if we could expose/share files to shell URL so you could use: this.worker = new Worker('./remote-shared-path/test.worker', {type: 'module'});

Ketec commented 1 year ago
export async function createRemoteURL(path: string) {
  const blob = await (await fetch(new URL(path, __webpack_public_path__).toString())).blob();
  return URL.createObjectURL(blob);
}

This approach does work (for local at least) - but only for plain js workers that have to be exported as assets in angular.json. No hashing or TS compilation.

Ketec commented 1 year ago

Using proxies to fake same domain for remotes to get around blobs and cors.