qiankun 加载子应用的流程和存在的跨域问题总结

2,834 阅读1分钟

qiankun 的根本目的

让主应用有能力将子应用嵌入到自身。

如何嵌入

要将子应用嵌入到主应用,首先需要拿到子应用的 html。然后将子应用 html 中的元素添加到主应用的容器中,并需要能单独处理子应用的 js(加沙箱隔离全局变量等)。

主要步骤如下:

  1. 通过fetch拿到子应用的html(需要在主应用里配置子应用的激活规则和子应用的index.html地址);
  2. 处理 html(去除html/body/script等标签);
  3. 主应用通过 fetch 去获取子应用的 js,包装 js(js沙箱)隔离全局变量;
  4. 执行包装完成后的 js 取出子应用导出的 mout 函数并执行(react/vue子项目中导出的实际上是子应用的渲染逻辑);
  5. 子应用渲染逻辑执行完成,dom 渲染到页面中。

流程图

image.png

跨域总结:

  1. 所有子应用前端服务器都需要处理跨域问题;
  2. 在子应用前端服务器没做代理的情况下,子应用后端服务器需要处理跨域请求问题。