微前端之使用无界集成可能出现的问题总结

• 无界集成可能出现的问题总结
  • ### 无界微应用访问Next.js项目跨域问题的解决方案
    • 通过 Next.js 配置解决跨域问题。
  • window.parent问题
  • antdv出现message不显示问题
  • 子应用的相对地址图片没有替换成绝对地址
  • 子应用 window 是一个代理对象，如何获取子应用的真实对象？
  • 浏览器回退及前进路由异常。
• 官网解释的常见问题

无界集成可能出现的问题总结

无界微应用访问Next.js项目跨域问题的解决方案

Next.js 是一个基于 React 的开发框架，它提供了很多强大的功能，如服务器端渲染、静态网站生成、API路由等。

跨域请求是指浏览器向不同源的服务器发送请求时，通常会受到浏览器的安全限制，比如不同 url 或者端口之间进行访问，就会报错：

今天部署了一个 Next.js 项目，在集成到无界微应用时，就报了这个跨域错误。

注意是其他项目访问本项目时报错，不是项目请求接口报错。

要解决这个问题，需要在 Next.js 配置中设置响应头，来允许跨域请求。

通过 Next.js 配置解决跨域问题。

在 next.config.js 中增加以下代码：

module.exports = {
  async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: "/:path*",
        headers: [
          { key: "Access-Control-Allow-Origin", value: "*" },
        ],
      },
    ];
  },
};

通过配置响应头，我们就可以解决访问项目跨域问题。这样，我们就可以在不同源的客户端上使用我们的路由，提供更好的用户体验和服务。

window.parent问题

如果你集成的子应用中，也有用到iframe，那么在iframe中，使用window.parent，这个获取到的，不再是子应用了，这个window.parent将会是主应用。
出现这个问题，就是你可能会将一些对象，放入到window里面，那这个时候，需要兼容下这个情况。

例如：

window.Demo = {}

//这个时候，需要再加上
window.parent.Demo = window.Demo; //这个的作用，是将Demo这个对象赋值给 “主应用”

这样，在iframe中，使用window.parent.demo，就不会出现null的问题了。

antdv出现message不显示问题

出现这个问题，是在第一次打开子应用后，关闭后，重新再打开子应用。message消息提示框，无法显示。

出这个问题，是因为子应用，进行了生命周期改造导致。

所以这里，不建议对子应用进行生命周期改造。

子应用的相对地址图片没有替换成绝对地址

子应用通过 v-html、innerHtml 或者在 template 中动态添加 style 时，框架默认的 plugin 无法处理这种场景。可通过动态资源路径解决。

在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

在应用入口 index.js 顶部导入 public-path.js。

import "./public-path";

子应用 window 是一个代理对象，如何获取子应用的真实对象？

通过 window.WUJIE_RAW_WINDOW 获取真实的 window 对象。

浏览器回退及前进路由异常。

问题描述：

重建模式下回到子应用时及后续回退都是进入子应用首页，无法进入子路由，前进只能进入子应用首页。
单例模式下回退到子应用时都是进入子应用首页，前进只能进入子应用首页。
保活模式下回退正常，前进只能进入子应用首页。

GitHub Issues：

页面刷新后，浏览器回退按钮点击多次无反应
开启路由同步时，切换子应用的tab（路由变化），刷新后，点击后退按钮，路由不变页面内容也不变

问题原因：

iframe 拥有自己的路由栈，切换子应用导致 iframe 被销毁，重新进入子应用时创建新的 iframe ，路由栈丢失。

解决方案：
暂无

官网解释的常见问题

1、请求资源报错
2、第三方包已经引入，使用时报错
3、子应用的字体没有生效
4、冒泡系列组件（比如下拉框）弹出位置不正确
5、子应用处理异步处理事件时，e.target 变成了 wujie-app
6、css 样式内部的相对地址相对的是主应用的域名
7、子应用使用 module federation 引用远程模块报错
8、子应用 iframe 初始化时加载、执行了主应用的资源
9、子应用 window 是一个代理对象，如何获取子应用的真实对象
10、DOMException: Blocked a frame with origin from accessing a cross-origin frame 报错
11、子应用的相对地址图片没有替换成绝对地址
12、vite4 子应用样式切换丢失

查看地址:https://wujie-micro.github.io/doc/question/

参考文档

https://juejin.cn/post/7262347509951889467
https://wujie-micro.github.io/doc/
https://article.juejin.cn/post/7252712402969018426