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

当我们在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文件内引入上面的脚本即可

import '@/utils/loadScript'