microApp 子应用跨域问题

不想当菜鸟的小菜鸟2024-02-29 19:04

最近在尝试微前端的方式实现新系统和老系统页面的兼容，目前市面上活跃度比较高的微前端技术：qiankun、microapp、wujie。经过对各大官网以及github的研究，个人首先pass掉qiankun,因为本来就对微前端不熟悉的我来说，qiankun的官网简单到让我无处下手。wujie和microapp的官网很友好，讲得很详细。但考虑到怕后期遇到问题，不知道如何处理的情况，避免少踩坑，最终还是选择了比较成熟的microapp。

背景：主应用：vite+vue3 子应用：vue2+webpack

问题：子应用成功在主应用中显示，但是子应用中的数据接口请求时（单独启动子应用，接口调用是正常的），报了跨域问题

官网针对于跨域有相应的处理方法：

奈何我已经在子应用中设置了，问题仍然存在。百度了很多博客，也看了github上的issue，都没能解决。最后请教了一下外援（团队中的技术骨干），我花了一上午都没解决的，人家几分钟就给我解决了。（没有对比就没有伤害呀～呜呜）

问题解决： 报错中提示的意思，除了跨域问题外，还明确表示Access-Control-Allow-Headers需要配置token（我当时就没看出来，喵了一眼，脑袋中就认定是Access-Control-Allow-Origin的配置问题）

后面修改配置，添加了Access-Control-Allow-Headers

css 复制代码

headers:{
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token'
    }

重新启动webpack子应用，再刷新一下页面，报错就消失啦～

记录原因：网上记录类似错误的博客很少，特此记录，复盘的同时也希望大家作为参考，避免踩坑～