vue项目，qiankun 微(子)应用 JSONP 跨域错误怎么处理

遇到的问题：

使用百度地图的官方定位api获取经纬度，在父应用中通过jsonp请求可以成功，也可以获取到数据。但是在子应用中请求能成功，但是获取不到数据。

找qiankun官网，给出了这样一段话。

通俗的来说就是：

跨域请求，可以通过父应用提供方法给子应用。 经过实践，在子应用直接通过ajax jsonp去解决跨域时，请求虽然能成功，但是代码中获取不到接口返回的数据。详细说明，可以查看这篇文章：微前端子应用中fetchjsonp请求跨域与超时的解决办法与原理探索

解决办法

在父应用中：安装：npm i fetch-jsonp。
在registerApps.js（注册qiankun）文件中：

js 复制代码

// 引入fetch-jsonp
import  fetchJsonp  from  fetch-jsonp;
// 注册qiankun
import { registerMicroApps } from 'qiankun';
registerMicroApps([
  {
    name: 'fetchJsonp',
    entry: `path/`,
    container: '#subContainer',
    activeRule: '/microFetchJsonp',
    loader,
    props: {
      // 重点1：把fetchJsonp传递给子应用
      fetchJsonp
    }
  },
]);
// 开启子应用
import { start } from 'qiankun';
start({
  // 重点2：把需要跨域请求的地址放行
  excludeAssetFilter: url => url.indexOf('map.baidu.com') !== -1
});

在子应用main.js入口文件中：

js 复制代码

export async function mount(props) {
  // 从父项目传递的fetchJsonp第三方跨域库，
  // 挂载到全局，在需要的地方使用。
  // 解决：子应用使用jsonp解决跨域时，请求能成功，但是获取不到数据的问题。
  Vue.prototype.$fetchJsonp = props.fetchJsonp;
  render(props);
};

在页面（map.vue）使用：

js 复制代码

// 子应用有可能会单独运行，所以做个判断
if (!window.__POWERED_BY_QIANKUN__) {
  // 定位容错：若未定位到，提示无法获取定位信息
  window.getLocationCallback = data => {
    if (!data.content) this.$message.warning('抱歉，暂时无法获取到您的定位信息！');
  };
  // 项目单独运行时
  $.ajax({
    url: 'https://api.map.baidu.com/location/ip?ak=***&coor=bd09ll',
    type: 'get',
    dataType: 'jsonp',
    jsonpCallback: 'getLocationCallback',
  }).then(data => {
    if (data && data.content && data.content.point) {
      const { x: lng, y: lat } = data.content.point;
      console.log(lng);
      console.log(lat);
    } else {
      window.getLocationCallback(data); // 容错处理
    }
  });
} else {
  // 作为子应用运行时，直接使用挂载到全局的$fetchJsonp
  this.$fetchJsonp('https://api.map.baidu.com/location/ip?ak=***&coor=bd09ll')
  .then(res => res.json())
  .then(data => {
    const { x: lng, y: lat } = data.content.point;
    console.log(lng);
    console.log(lat);
  });
  // 注意： 第一个.then 中获取到的不是最终数据，而是一个中间的数据流对象；
  // 注意： 第一个.then 中获取到的数据，是一个 Response 类型对象；
  // 注意： 第二个.then 中，获取到的才是真正的数据；
}

到此，子应用跨域请求报错问题就解决了。如有问题，可私信或评论区留言，本人也是小菜鸡一枚，能解答的尽量，解答不来的只能靠君自己了。相信你们也很厉害，加油加油！！！