Qiankun实践总结：从跨站发送Cookies到实战微前端

2024-01-10 02:49:26

在我们的项目中，我们使用iframe嵌入不同的微应用，iframe虽然有挺多坑，但用着还算顺手。想要切换到qiankun，主要原因是Chrome80后的版本会出现跨站不发送Cookies的问题。因此，我们决定尝试qiankun，看看能否解决这个问题，同时也能在实际项目中测试实践微前端。

基于Vue的qiankun实践总结

一、遇到跨域Cookies问题

在使用qiankun之前，我们遇到跨域Cookies问题，主要表现为：在主应用中设置的Cookies在微应用中无法获取，而在微应用中设置的Cookies在主应用中也无法获取。

为了解决这个问题，我们尝试了以下几种方法：

在主应用中设置Access-Control-Allow-Credentials首部，允许微应用获取主应用的Cookies。
在微应用中设置Access-Control-Allow-Origin首部，允许主应用获取微应用的Cookies。
在主应用和微应用之间使用代理服务器，将请求转发到各自的服务器。

但是，这些方法都没有解决问题。最终，我们决定使用qiankun来解决这个问题。

二、qiankun简介

qiankun是一个基于Vue的微前端框架，它可以帮助我们轻松地将不同的微应用集成到一个主应用中。qiankun具有以下特点：

开箱即用：qiankun提供了开箱即用的解决方案，不需要额外的配置或修改。
灵活：qiankun可以与任何Vue微应用集成，并且支持多种微应用加载方式。
性能优化：qiankun提供了各种性能优化措施，如代码拆分、路由懒加载等。
安全：qiankun提供了各种安全措施，如沙箱隔离、跨域保护等。

三、qiankun的使用

在我们的项目中，我们将主应用和微应用都升级到了Vue 3，并使用qiankun将微应用集成到了主应用中。我们遵循了qiankun的官方文档，并在项目的package.json文件中添加了以下依赖：

{
  "dependencies": {
    "qiankun": "^2.0.0"
  }
}

然后，我们在主应用中创建了一个main.js文件，并在其中配置了qiankun：

import { createApp } from 'vue'
import App from './App.vue'
import { registerMicroApps, start } from 'qiankun'

const app = createApp(App)

// 注册微应用
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',
    container: '#app1'
  },
  {
    name: 'app2',
    entry: '//localhost:3002',
    container: '#app2'
  }
])

// 启动qiankun
start()

app.mount('#app')

在微应用中，我们也创建了一个main.js文件，并在其中配置了qiankun：

import { createApp } from 'vue'
import App from './App.vue'
import { initGlobalState } from 'qiankun'

const app = createApp(App)

// 初始化全局状态
initGlobalState({
  // ...
})

app.mount('#app')