Angular 17 + Nx模块联邦开发环境node_modules加载CORS报错求助

问题现象 #

• 访问http://localhost:4200时触发CORS拦截：从源http://localhost:4200访问脚本node:module被CORS策略阻止，提示跨域请求仅支持chrome、http等协议方案
• 伴随ChunkLoadError：加载chunk node_modules_xx-platform_xx-header_fesm2022_xx-platform-xx-header-f2fb961失败

环境信息 #

• Angular 17
• Nx
• Module Federation
• devDependencies包含@angular-architects/module-federation@18.0.4

已尝试的无效配置 #

在项目serve配置中添加CORS头和publicHost，但未解决问题：

"serve": {
  "executor": "@nx/angular:module-federation-dev-server",
  "options": {
    "headers": {
      "Access-Control-Allow-Origin": "*"
    },
    "publicHost": "http://localhost:4200"
  }
}

解决方案 #

1. 修正模块联邦远程模块配置 #

问题核心并非CORS，而是远程模块引用路径错误导致请求了node:协议。检查module-federation.config.ts中的远程模块URL，确保使用完整HTTP/HTTPS路径，避免错误协议前缀：

// 错误示例
remotes: {
  'xx-platform': 'node:xx-platform@http://localhost:3000/remoteEntry.js'
}

// 正确示例
remotes: {
  'xx-platform': 'http://localhost:3000/remoteEntry.js'
}

2. 匹配模块联邦与Angular版本 #

当前使用的@angular-architects/module-federation@18.0.4适配Angular 18，与Angular 17版本不兼容会导致路径解析异常，降级到适配版本：

npm install @angular-architects/module-federation@17.0.0 --save-dev

3. 显式设置publicPath #

在module-federation.config.ts中指定当前应用的publicPath，确保chunk加载路径正确：

export const mfConfig: MfConfig = {
  name: 'your-host-app',
  remotes: {
    // 远程模块配置
  },
  publicPath: 'http://localhost:4200/'
};

4. 清理缓存并重启服务 #

执行命令清理Nx与Angular缓存，避免旧配置残留：

nx reset
npm run clean
nx serve your-host-app

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