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.