Angular 13 模块联合 IIS 托管为 MF 提供 CORS 错误

Question

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"
                        }
                    },

Answer 1

I had the same error. The issue in my case was that my remote app was a devServer ( https://webpack.js.org/configuration/dev-server/ ) and under its webpack.config.js the cors configuration missed.

devServer: {
  ...,
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
},

Answer 2

Finally found a solution for this.

Go to IIS, click on your website, find the HTTP RESPONSE HEADERS icon, and configure it like this:

After that, there is a chance you still get an 404 error while trying to fetch a ".mjs" file, if that is the case, just add it to the mime types like this:

And that should solve your issue.