解决qiankun微前端加载腾讯地图JSONP跨域问题

qiankun微前端框架加载腾讯地图会报jsonp请求跨域的问题,官网给的解决方案如下图所示：

image.png

然而并不能解决实际项目遇到的场景，qiankun框架加载腾讯地图api，腾讯地图本身会动态加载一些JSONP请求的js，从而导致JSONP跨域错误，加载不了地图，就很麻烦，算是qiankun框架的天生bug吧？于是我使用了曲线救国的方法来解决这个问题。
新建了一个腾讯地图的项目，使用iframe嵌套腾讯地图，使用postMessage互相通信。

image.png

1. 子应用：

这个子应用我是使用vue3来开发的，该子应用和iframe的通信方式如下：

        onMounted(async () => {
            window.addEventListener('message', (res) => {
                if (res && res.data && res.data.params && res.data.params.data) {
                    let arr = res.data.params.data.map(item => {
                        return item.title
                    })
                    state.AdForm.adPositionShop = arr.join(',')
                }
            }) 
        })

2. 腾讯地图核心的代码

因为使用到腾讯地图WebService API 的关键词输入提示的接口，需要使用jsonp请求来获取数据，这里使用vue-jsonp来发送jsonp请求。

image.png

效果

image.png

总结

涉及到的知识点有：

1. vue调取腾讯webService API
   参考文章
2. vue页面与iframe页面通信方法
   参考文章