NX MFE angular module federation not able to access remote micro front end

Even if you are deploying into subdomains it will treat as 2 domains So you need to setup the Cors enabler. If you are using IIS for deployment follow the below steps.

Step 1 :- FOR CORS

In this image you can see the HTTP Response header, add ‘Access-Control-Allow-Origin’: ‘*’ for shell and remotes.

IIS HTTP response header here

if you have ‘Web.config’ you can give values in that file.

 <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>

Step 2 :- ERR_FAILED 404

In your screenshot remoteEntry extension is not .js it is .mjs So may be the server doesn’t have this extension so just add this extension in the server MIME types (for both shell and remotes). refer the below image

IIS mime types here

Or you can also add this configuration into the web.config

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

Step 3 :- Restart the server.

Try this , It worked in my case.

Leave a Comment