前端面试题突破:微前端 Qiankun框架怎么解决跨域?-技术文章-思凡资源网

Qiankun 是基于 Single SPA 的微前端框架，因此在解决跨域问题时，它采用了 Single SPA 的方式去解决。在 Single SPA 框架中，它通过将子应用进行封装，使子应用能够在主应用中运行，其中包括解决子应用的跨域问题。

具体而言，Qiankun 在解决跨域问题时提供了两种方式：

1.使用 html entry 将子应用打包成一个 html 文件，然后通过主应用中的一个 iframe 来加载这个 html 文件，这样子应用中所有的请求都会通过主应用的域名来访问，避免了跨域问题。示例如下：

主应用中引用子应用：

import { loadMicroApp } from 'qiankun';

loadMicroApp({
  name: 'subapp',
  entry: '//localhost:7100',
  container: '#subapp-container',
  htmlEntry: '/subapp.html',
});

子应用中的 html 文件：

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>subapp</title>
</head>
<body>
  <div id="app"></div>
  <script src="./static/js/main.js"></script>
</body>
</html>

2.使用 fetch hook 在主应用中定义一个 fetch hook 方法，然后在子应用中使用该方法发起网络请求，请求会被拦截到主应用中进行处理，主应用再将结果返回给子应用。示例如下：

主应用中添加 fetch hook：

function patchFetch() {
  const originalFetch = window.fetch;
  window.fetch = (...args) => {
    return originalFetch.apply(window, args).then(response => {
      // 在这里可以对 response 进行处理
      return response;
    });
  };
}

registerMicroApps([
  {
    name: 'subapp',
    entry: '//localhost:7100',
    container: '#subapp-container',
    activeRule: '/subapp',
    props: {
      patchFetch,
    },
  },
]);

子应用中调用 fetch hook 发起网络请求：

const response = await props.patchFetch('/api');

以上是 Qiankun 在解决跨域问题时提供的两种方法，使用起来都相对简单，根据实际情况选择其中一种即可。