Failed to fetch dynamically imported module: https://mfe1app1234.azurewebsites.net/remoteEntry.js

[Sakol538]

In shell app routes: configured { path: 'LVE-ANiampleProjact', component: WebComponentWrapper, data: { type: 'module', remoteEntry: 'https://mfe1app1234.azurewebsites.net/remoteEntry.js', exposedModule: './AppModule', } as WebComponentWrapperOptions, }, getting the below error

[Sakol538]

In shell app routes: configured { path: 'flights', loadChildren: () => loadRemoteModule({ type: 'manifest', remoteName: 'mfe1', exposedModule: './Module', }).then((m) => m.AppModule), },

mf.manifest.json { "mfe1": "https://mfe1app1234.azurewebsites.net/remoteEntry.js" }

facing below error:

[jitendra776]

This is not a problem of mfe or shell code. it due to the hosting server

Here’s a step-by-step solution:

Open Azure Portal: Go to Azure Portal. Select Your App Service: Navigate to App Services and select your app(mfe). Go to CORS Settings: In the left-hand menu, find the API section and click on CORS. Add Allowed Origins: In the CORS settings, add the URLs you want to allow. For example: http://localhost:5000 (for local development) https://your-production-domain.com (for production) Save: Click Save to apply the changes.