如何解决拉取微应用 entry 时 cookie 未携带的问题

最新推荐文章于 2025-01-10 16:07:17 发布

原创最新推荐文章于 2025-01-10 16:07:17 发布 · 10w+ 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #java

qiankun微前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在微前端架构中，通过自定义fetch配置解决微应用的跨域问题，并确保Cookie正确传递以支持登录状态等场景。适用于使用qiankun或umi插件进行微应用开发的情况。

因为拉取微应用 entry 的请求都是跨域的，所以当你的微应用是依赖 cookie (如登陆鉴权)的情况下，你需要通过自定义 fetch 的方式，开启 fetch 的 cors 模式：

如果你是通过 registerMicroApps 加载微应用的，你需要在 start 方法里配置自定义 fetch，如：

import { start } from 'qiankun';

start({
  fetch(url, ...args) {
    // 给指定的微应用 entry 开启跨域请求
    if (url === 'http://app.alipay.com/entry.html') {
      return window.fetch(url, {
        ...args,
        mode: 'cors',
        credentials: 'include',
      });
    }

    return window.fetch(url, ...args);
  },
});

如果你是通过 loadMicroApp 加载微应用的，你需要在调用时配置自定义 fetch，如：

import { loadMicroApp } from 'qiankun';

loadMicroApp(app, {
  fetch(url, ...args) {
    // 给指定的微应用 entry 开启跨域请求
    if (url === 'http://app.alipay.com/entry.html') {
      return window.fetch(url, {
        ...args,
        mode: 'cors',
        credentials: 'include',
      });
    }

    return window.fetch(url, ...args);
  },
});

如果你是通过 umi plugin 来使用 qiankun 的，那么你只需要给对应的微应用开启 credentials 配置即可：

export default {
  qiankun: {
    master: {
      apps: [
        {
          name: 'app',
          entry: '//app.alipay.com/entry.html',
          credentials: true,
        }
      ]
    }
  }
}