'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