microApp 子应用跨域问题

最近在尝试微前端的方式实现新系统和老系统页面的兼容,目前市面上活跃度比较高的微前端技术: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子应用,再刷新一下页面,报错就消失啦~

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

相关推荐
并不会28 分钟前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、31 分钟前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜31 分钟前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师34 分钟前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端