'Angular 13 module federation IIS hosting give CORS error for MFs
I have a shell app [angular 13] hosted on my local IIS on port 2000 and a MF app which is hosted on IIS on port 1001. I have loaded my MF within shell app using dynamic module federation in shell route.
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
outlet: 'pChild',
loadChildren: () =>
loadRemoteModule({
type: 'module',
remoteEntry: 'http://localhost:1001/remoteEntry.js',
exposedModule: './AppModule',
})
.then((m) => {
return m.AppModule;
})
.catch((e) => {
return import('src/app/placeholder/error.module').then(
(m) => m.ErrorModule
);
}),
}]
I am getting CORS error for MF app.
Access to script at 'http://localhost:1001/remoteEntry.js' from origin 'http://localhost:2000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
UPDATED
Proxy.conf.json
{
"/localhost/": {
"target": "http://localhost:2000/",
"changeOrigin": true,
"logLevel": "debug"
}
}
and below are setting proxy in angular.json.
"serve": {
"builder": "ngx-build-plus:dev-server",
"configurations": {
"production": {
"browserTarget": "shell:build:production",
"extraWebpackConfig": "webpack.prod.config.js",
"proxyConfig" : "src/proxy.conf.json"
},
"development": {
"browserTarget": "shell:build:development"
}
},
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|