How to Register Multiple Service Workers in a Shell App for Micro Frontends (MFE) Without CORS Errors?

I’m working on a Micro Frontend (MFE) architecture where each MFE has its own Service Worker. I need to register all these Service Workers in the shell app, but I’m encountering CORS errors even though the CORS headers are correctly set.

Here is the code snippet I’m using to register the Service Workers:

navigator.serviceWorker.register('http://localhost:3000/service-worker1.js', { scope: '/mfe1/' })
  .then(function(registration) {
    console.log('Service Worker for MFE1 registered with scope:', registration.scope);
  })
  .catch(function(error) {
    console.log('Service Worker registration for MFE1 failed:', error);
  });

navigator.serviceWorker.register('http://localhost:3001/service-worker2.js', { scope: '/mfe2/' })
  .then(function(registration) {
    console.log('Service Worker for MFE2 registered with scope:', registration.scope);
  })
  .catch(function(error) {
    console.log('Service Worker registration for MFE2 failed:', error);
  });

The error message I receive is:

SecurityError: Failed to register a ServiceWorker: The origin of the provided scriptURL ('http://localhost:3000') does not match the current origin ('http://localhost:4000').

I understand that Service Workers need to be registered from the same origin for security reasons. However, in an MFE setup, each MFE might be served from different domains or ports. Is there any workaround or method to achieve this while keeping the Service Worker scripts on their respective domains?

Any insights or solutions would be greatly appreciated!