NX微前端HTTPS部署异常：请求remoteEntry.mjs返回ERR_EMPTY_RESPONSE

问题根源 #

浏览器用HTTP请求remoteEntry.mjs，但远程应用已启用HTTPS，协议不匹配导致返回空响应。

修复步骤 #

1. 统一所有应用的HTTPS配置 #

检查每个微前端应用的package.json中@nx/angular:webpack-dev-server的配置，确保publicHost是完整的HTTPS地址，示例配置：

{
  "nx": {
    "targets": {
      "serve": {
        "executor": "@nx/angular:webpack-dev-server",
        "options": {
          "ssl": true,
          "sslCert": "./ssl/cert.pem",
          "sslKey": "./ssl/key.pem",
          "publicHost": "https://localhost:4201"
        }
      }
    }
  }
}

2. 修正主应用的远程入口协议 #

在主应用的Module Federation配置里，把远程应用的remoteEntry.mjs地址明确写成HTTPS，比如：

// 主应用webpack.config.js中的ModuleFederationPlugin配置
new ModuleFederationPlugin({
  remotes: {
    remoteApp: 'remoteApp@https://localhost:4201/remoteEntry.mjs'
  }
})

别漏写https://，不然浏览器会自动降级成HTTP请求

3. 确保SSL证书可用 #

• 检查证书和密钥的路径是否正确，文件有没有读取权限
• 本地测试可以用NX自动生成证书，执行nx generate @nx/angular:ssl就能生成，避免自定义证书的信任问题
• 直接在浏览器访问https://localhost:4201/remoteEntry.mjs，确认能正常加载这个文件

4. 清理缓存并配置CORS #

• 清空浏览器缓存，避免旧的HTTP请求缓存干扰
• 给远程应用的webpack-dev-server加CORS头，允许主应用的HTTPS域名访问：

"options": {
  "headers": {
    "Access-Control-Allow-Origin": "https://localhost:4200"
  }
}

5. 补全NX配置细节 #

NX 16.0.0的webpack-dev-server可能需要额外配置port和publicPath，确保和publicHost一致：

"options": {
  "port": 4201,
  "publicPath": "https://localhost:4201/",
  "ssl": true,
  "sslCert": "./ssl/cert.pem",
  "sslKey": "./ssl/key.pem",
  "publicHost": "https://localhost:4201"
}

如果还是有问题，可以升级到NX 16.x的最新补丁版本（比如16.10.x），修复已知的HTTPS配置bug。

验证方法 #

1. 启动所有微前端应用（确保都开了SSL）
2. 打开主应用的HTTPS地址（比如https://localhost:4200）
3. 看浏览器控制台，确认remoteEntry.mjs的请求是HTTPS，且返回200状态码

内容的提问来源于stack exchange，提问作者San Jaisy