NX Angular Module Federation无法访问远程微前端问题求助

1. JSON格式语法错误 #

你的module-federation.manifest.json最后一个属性末尾多了逗号，JSON规范不允许尾逗号，会导致res.json()解析失败，修正后的内容如下：

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

2. Manifest地址配置缺失关键路径 #

NX Module Federation的setRemoteDefinitions需要传入每个微前端的**remoteEntry.js文件完整地址**，而非仅子域名根地址。当前配置会导致Shell应用请求域名根路径，触发404错误。修正后的manifest需补充资源路径：

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

3. 跨域（CORS）限制问题 #

Shell应用与微前端部署在不同子域名，浏览器会拦截跨域资源请求，需在两个微前端的服务器配置CORS规则，允许Shell应用域名访问资源。

示例配置（Nginx） #

add_header Access-Control-Allow-Origin "https://你的Shell应用域名";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type";

示例配置（Angular开发服务器） #

在angular.json的serve节点中添加：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "headers": {
      "Access-Control-Allow-Origin": "https://你的Shell应用域名"
    }
  }
}

内容的提问来源于stack exchange，提问作者Pranav MS