Angular微前端架构下微应用服务URL被基座应用URL替换如何解决

问题根本原因 #

微应用运行在基座上下文时，浏览器当前页面的origin为基座地址，Angular HttpClient默认使用当前页面origin作为相对路径请求的前缀，不会自动读取微应用自身的运行/部署origin，最终导致请求地址被拼接为基座地址。

可落地解决方案 #

• 方案1：配置独立的接口请求前缀
  不要在微应用中使用/api-url/xxx这类纯相对路径发起请求，提前为微应用配置独立的baseApiUrl变量，所有请求统一拼接该前缀。
  可以在微应用的environment配置文件中区分环境：本地开发时设置environment.baseApiUrl = 'http://localhost:4000'，生产环境替换为微应用的实际部署域名，发请求时统一写作this.http.get(\${environment.baseApiUrl}/api-url/xxx`)`即可。

• 方案2：运行时动态读取Webpack publicPath
  Webpack Module Federation打包时可直接暴露微应用的publicPath，微应用初始化时读取该值作为接口请求的基础前缀。

  1. 首先在微应用的module-federation.config.js中配置正确的publicPath：本地开发设置为publicPath: 'http://localhost:4000/'，生产环境替换为微应用的实际部署路径。
  2. 在微应用入口文件main.ts中暴露publicPath：

     export const microAppPublicPath = __webpack_public_path__;
     

  3. 在微应用的全局HTTP拦截器中，统一为所有相对路径请求拼接该前缀即可。

• 方案3：动态提取微应用加载地址
  如果不想硬编码配置地址，可以在微应用启动时从自身加载的静态资源地址中提取origin，自动生成请求前缀：

  // 微应用app.module.ts的providers数组中添加如下配置
  {
    provide: APP_INITIALIZER,
    useFactory: () => {
      return () => {
        // 替换为你的微应用打包后的入口js文件名关键词
        const microAppScript = document.querySelector('script[src*="your-micro-app-name/main.js"]');
        if (microAppScript) {
          const url = new URL(microAppScript.src);
          window.microAppBaseUrl = url.origin;
        }
      }
    },
    multi: true
  }
  

  后续发请求时直接用window.microAppBaseUrl拼接接口路径即可。

特殊情况说明：如果接口本身部署在独立的网关域名下，和基座、微应用的部署域名都不相同，直接给所有应用配置统一的网关baseApiUrl即可，不需要区分运行上下文。

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