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

Did you tried with adding proxy config for your angular app? you can refer the docs it will help and resolve the CORS issues. https://www.azilen.com/blog/how-to-resolve-cors-errors-by-using-angular-proxy — Kishan Vaishnani, May 01 '22 at 10:01
@KishanVaishnani Please see updated question. I have implemented prxy setting but still getting same error. — angfreak, May 01 '22 at 18:32
Does this problem only occur on iis? Does the angular app work fine locally? — samwu, May 02 '22 at 08:07
@angfreak did you got any workaround for the above issue? i as well facing similar issue. — cj devin, Sep 27 '22 at 04:29

score 1 · Answer 1 · answered Jan 28 '23 at 23:29

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.

score 0 · Answer 2 · answered Jun 20 '22 at 15:59

0

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

answered Jun 20 '22 at 15:59

sDe

56
1

i'm not using devServer, i'm using IIS, should this work as well for my case? I added it to the webpack.config.js in the host, but it does not seems to be working. – Yogurtu Jan 28 '23 at 21:44

score 0 · Answer 3 · answered Apr 12 '23 at 14:39

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

Angular 13 module federation IIS hosting give CORS error for MFs

3 Answers3