子应用向body添加script标签失败

[cpa0701]

提问之前强烈建立您能先阅读一下《提问的智慧》

What happens?

在子应用中使用vue-baidu-map，无法正常加载

在看源码时发现子应用的document.body中添加script标签失败没报错，但无法正确添加到body中，请问下有解决方法吗？

最小可复现仓库

为节约大家的时间，无复现步骤的 ISSUE 会被关闭，提供之后再 REOPEN

复现步骤，错误日志以及相关配置

相关环境信息

• qiankun 版本
• 浏览器版本：
• 操作系统：

[justJokee]

2.0.16及以前的版本可以自定义fetch方法，动态追加地图，模糊匹配百度地图的url，然后新建script插入到header中，以下代码可模拟原生地图使用，仅供参考：

const list = [
  'https://api.map.baidu.com'
]
const save = [
  'https://api.map.baidu.com/getscript'
]
export function qiankunFetch(url,args){
  let hijack = false
  list.some(item =>{
    if(url.includes(item)){
      hijack = true
      insertEle(url)
      return true
    }
  })
  if(hijack) return Promise.resolve()
  return window.fetch(url, ...args)
}


function insertEle(url){
  let head = document.getElementsByTagName('head')[0]
  let ele = document.createElement('script')
  let id = +new Date() + Math.random()

  ele.src = url
  ele.id = id
  head.append(ele)
  ele.onload = function(){
    let removeFlag
    save.some((item) =>{
      if(url.includes(item)){
        removeFlag = true
        return true
      }
    })
    if(!removeFlag) head.removeChild(document.getElementById(id))
  }
}

[kuitos]

可以设置 excludeAssetFilter https://qiankun.umijs.org/zh/api#loadmicroappapp-configuration

excludeAssetFilter: url => url.indexOf('api.map.baidu.com') !== -1

[cpa0701]

可以设置 excludeAssetFilter https://qiankun.umijs.org/zh/api#loadmicroappapp-configuration

excludeAssetFilter: url => url.indexOf('api.map.baidu.com') !== -1

好的，let me try try

[cpa0701]

可以自定义fetch方法，动态追加地图，模糊匹配百度地图的url，然后新建script插入到header中，以下代码可模拟原生地图使用，仅供参考：

const list = [
  'https://api.map.baidu.com'
]
const save = [
  'https://api.map.baidu.com/getscript'
]
export function qiankunFetch(url,args){
  let hijack = false
  list.some(item =>{
    if(url.includes(item)){
      hijack = true
      insertEle(url)
      return true
    }
  })
  if(hijack) return Promise.resolve()
  return window.fetch(url, ...args)
}


function insertEle(url){
  let head = document.getElementsByTagName('head')[0]
  let ele = document.createElement('script')
  let id = +new Date() + Math.random()

  ele.src = url
  ele.id = id
  head.append(ele)
  ele.onload = function(){
    let removeFlag
    save.some((item) =>{
      if(url.includes(item)){
        removeFlag = true
        return true
      }
    })
    if(!removeFlag) head.removeChild(document.getElementById(id))
  }
}

好的，谢谢，我先试试

[Carolineliu]

hello，想请问下我做了同样的设置，还是显示跨域
父应用

子应用

可以设置 excludeAssetFilter https://qiankun.umijs.org/zh/api#loadmicroappapp-configuration

excludeAssetFilter: url => url.indexOf('api.map.baidu.com') !== -1

[ZouHuaYi]

我也是设置了没有用，怎么弄啊！楼上

[yenkos]

一摸一样的问题，害

[yenkos]

这个地图插件源码有个getMapScript方法是这样写的
const $script = document.createElement('script')
$script.src = https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap
global.document.body.appendChild($script)

改成这样就可以
const $script = document.createElement('script')
$script.src = https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap
global.document.body.appendChild($script)

[Jina88]

父应用 main.js 设置 excludeAssetFilter

start({ prefetch: false, singular: true, fetch: window.fetch, excludeAssetFilter: (assetUrl) => { const whiteList = []; const whiteWords = ['baidu', 'map'] if (whiteList.includes(assetUrl)) { return true } return whiteWords.some(w => { return assetUrl.includes(w) }) } } );

子应用 在map使用之前
let script = document.getElementById('scriptMap'); if (!script) { window.BMap_loadScriptTime = (new Date).getTime(); script = document.createElement('script'); script.id = 'scriptMap'; script.src = 'http://api.map.baidu.com/getscript?v=2.0&ak=ak&services=&t='; script.type="text/javascript" document.body.append(script); }
注意qiankun版本更新至2.0.17及以上

[ilbefun]

楼上的都试过了没用啊，我该怎么办？

[a15218378694]

楼上的都试过了没用啊，我该怎么办？

请问解决了吗

[a15218378694]

这个地图插件源码有个getMapScript方法是这样写的 const $script = document.createElement('script') $script.src = https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap global.document.body.appendChild($script)

改成这样就可以 const $script = document.createElement('script') $script.src = https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap global.document.body.appendChild($script)

没看出改动呀

[a15218378694]

2.0.16及以前的版本可以自定义fetch方法, 新的版本就不行了 ? 我现在这边是拦截不到百度地图的请求呢

[gongshun]

如你用的是 vue-baidu-map 插件，那就直接用 excludeAssetFilter 过滤

如果是直接用的百度地图 js，不能直接用 script 标签插入，需要改为异步插入，然后才能用 excludeAssetFilter 过滤

function loadScript() { 
  var script = document.createElement("script"); 
  script.src = "https://api.map.baidu.com/api?v=20&type=webgl&ak=您的密钥&callback=initialize";
  document.body.appendChild(script); 
} 

[huangxu510]

同样遇到了这个问题《子应用向body添加script标签失败》，请问楼主解决了没

[a15218378694]

jsonp函数放主应用, 子应用调用这个方法请求

[Slebee]

同样的问题，子应用引入的第三方lib中使用了jsonp出现了跨域问题，使用乾坤插件的时候主应用设置excludeAssetFilter不生效，自定义fetch也没反应，但是，不用乾坤插件excludeAssetFilter就没有问题，给类似情况的做个参考

[ranmeizi]

果然有用哦 GL 要filter
api.baidu.com
mapOnline0
这两个关键字

[huangche007]

@ranmeizi 你上面说的“GL 要filter
api.baidu.com
mapOnline0
这两个关键字”这句话是啥意思来着。