qiankun微应用加载第三方js跨域报错

最新推荐文章于 2024-12-04 11:27:17 发布

stubborn丶lili

最新推荐文章于 2024-12-04 11:27:17 发布

阅读量2.7k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_43340606/article/details/128663293

版权

vue 专栏收录该内容

35 篇文章

订阅专栏

文章介绍了在使用qiankun框架时遇到的跨域问题，以及如何通过excludeAssetFilterAPI和动态加载来解决。通过定义白名单和添加特定协议_custom-exclude_=_MAIN到资源链接，可以避免qiankun的静态资源拦截，简化了支持跨域的复杂性。此外，还提供了一种动态加载脚本的方法以适应更多的第三方资源需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们在qiankun微应用，引入第三方js脚本时会产生跨域问题并报错，看qiankun的解释：常见问题 - qiankun

qiankun会把静态资源的加载拦截，改用fetch方式获取资源，所以要求这些资源支持跨域。

虽然qiankun也提供了解决方案，但支持跨域的方式也颇为复杂，有没有更简单的方式，纯前端实现？

幸在qiankun提供了excludeAssetFilter API 说明 - qiankun

解决方案：

步骤1 — 将资源写入主应用（基座） excludeAssetFilter 的放行规则里

步骤2 — 将资源加载方式改为动态加载

假如，我们需要加载的第三方脚本链接是 https://xxxx.yyy.com/sdk/xxx-1.0.0.js

可以在如下主应用里通过定义白名单脚本链接 whiteList ，直接放行该脚本。

当我们需要放行的第三方脚本越来越多，需要在 whiteList 里人工添加需要放行的脚本链接，后续维护成本高。

可以通过制定一个协议，如下，协议关键字 _custom-exclude_=MAIN

微应用里需要放行的资源，开发者自行在链接上带上放行协议关键字即可。一劳永逸。

start({
  prefetch: false,
  excludeAssetFilter: assetUrl => { // 指定部分特殊的动态加载的微应用资源（css/js) 不被 qiankun 劫持处理
    // 自定义白名单链接
    const whiteList = ['https://xxxx.yyy.com/sdk/xxx-1.0.0.js', 'https://ccc.ttt.com/js/xxx-1.0.0.min.js']
    /**
     * 白名单协议：子应用下如需要放行动态加载的css/js资源，可以在链接上带上参数 _custom-exclude_=MAIN
     */
    const whiteWords = ['_custom-exclude_=MAIN'] // 白名单关键词：协议制定 _custom-exclude_=MAIN。
    if (whiteList.includes(assetUrl)) {
      return true
    }
    return whiteWords.some(w => {
      return assetUrl.includes(w)
    })
  },
  ......
})

子应用加载该脚本方式改为动态加载方式（可自行实现，或者直接使用示例代码）。

例如,新建如下文件

src/utils/loadScript.js

const loadScript = (url) => {
  let script = document.createElement('script')
  script.setAttribute('type', 'text/javascript')
  script.setAttribute('src', url)
  let head = document.getElementsByTagName('head')
  if (head.length) {
    head[0].appendChild(script)
  } else {
    document.documentElement.appendChild(script)
  }
}
 
loadScript('https://xxxx.yyy.com/sdk/xxx-1.0.0.js?_custom-exclude_=MAIN')  // 需要放行的脚本1
loadScript('https://ccc.ttt.com/js/xxx-1.0.0.min.js?_custom-exclude_=MAIN') // 需要放行的脚本2

在src/main.js文件内引入上面的脚本即可