vue调用第三方接口跨域问题(百度地图普通ip定位)

vue调用第三方接口跨域问题(百度地图普通ip定位)

简介
axios不支持jsonp，所以需使用其他插件：vue-jsonp。vue-jsonp官网

使用JSONP主要是目的通过动态创建Script，动态拼接url，进而抓取数据，实现跨域。确切地说，AJAX请求由于同源影响，是不允许进行跨域请求的，而Script标签src属性中的链接却可以访问跨域的js脚本，利用这一特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的JS代码，在src属性中进行调用，实现跨域。
vue-jsonp官网:传送门

1. 第一步：安装vue-resource模块，代码如下:

npm install vue-jsonp --save

2. 在vue cli项目main.js中添加

import VueAxios from 'vue-axios'
import { VueJsonp } from 'vue-jsonp' 

3. 在vue项目中使用

this.$jsonp('http://api.map.baidu.com/location/ip?ip=&coor=bd09ll' , {
    ak: 'xxxxxxxxxxxxxxxxxxxxx'
}).then((res)=>{
　console.log(res)
})

其中ak是我传入的参数 （百度访问应用（AK） 接口中的必填参数）
这是访问的是百度地图普通ip定位接口 ak可以去百度地图控制台申请
浏览器请求结果如下: