NX MFE Angular 模块联合无法访问远程微前端

发布于04月11日

我有一个shell 和两个使用NX模块联盟的MFE，即

agency(a)和
home(b).

它托管在不同的子域中.

我在try 访问时遇到问题.

我的module-federation.manifest.json

{
  "agency": "https://a.abc.maindomain.com",
  "home": "https://b.abc.maindomain.com",
}

main.ts个

import { setRemoteDefinitions } from '@nrwl/angular/mf';

fetch('/assets/module-federation.manifest.json')
  .then((res) => res.json())
  .then((definitions) => setRemoteDefinitions(definitions))
  .then(() => import('./bootstrap').catch((err) => console.error(err)));

以下是我的控制台错误

请指出我在这里做错了什么.

推荐答案

即使您要部署到子域中，它也会被视为2个域，因此您需要设置CORS启用码.如果您使用IIS进行部署，请执行以下步骤.

第一步:-FOR CORS

在此图像中，您可以看到HTTP响应头，为shell 和远程添加‘Access-Control-Allow-Origin’:‘*’.

IIS HTTP response header here个

如果您有‘Web.config’，您可以在该文件中给出值.

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

第二步:-ERR_FAILED 404

在您的屏幕截图中，emoteEntry扩展名不是.js，而是.mjs，所以可能服务器没有这个扩展名，所以只需在服务器MIME类型中添加这个扩展名(对于shell 和远程).请参阅下图

IIS mime types here个

或者，您也可以将此配置添加到web.config中

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

第三步:-Restart the server.

试试这个，对我来说很管用.