Angular 13 module federation IIS hosting give CORS error for MFs

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

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.

Answer 2

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 3

You can solve this CORS error by enabling the CORS in web.config in windows server.

Add the below configuration

<system.webServer>
         <httpProtocol>
             <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="*" />
                <add name="Access-Control-Allow-Headers" value="*" />
             </customHeaders>
         </httpProtocol>
    </system.webServer>

And also you need to enable the mime file extension of .mjs. This can be also added in web.config file if you are using windows server. Just to add the below code

<configuration>
   <system.webServer>
      <staticContent>
         <mimeMap fileExtension=".mjs" mimeType="text/javascript" />      
      </staticContent>
   </system.webServer>
</configuration>

For more reference here