vue-jsonp的官网 https://www.npmjs.com/package/vue-jsonp
vue-jsonp的跨域请求原理
ajax请求受同源策略影响,不允许进行跨域请求( 当服务器网络受限时,通过配置 ajax 代理实现的跨域方案,在本地运行时ok,但在项目打包部署后会失效!)
script标签src属性中的链接却可以访问跨域的js脚本
vue-jsonp 插件对script标签src属性访问跨域js脚本的方式进行了封装,可以便捷实现跨域请求
1. 安装 vue-jsonp
npm i vue-jsonp -S
2. 在 main.js中导入 vue-jsonp
import { VueJsonp } from 'vue-jsonp' Vue.use(VueJsonp) const vm = new Vue() vm.$jsonp('/some-jsonp-url', { myCustomUrlParam: 'veryNice' })
3. 在 .vue 文件中使用
以访问百度地图的本地检索API为例
this.$jsonp( '//api.map.baidu.com/place/v2/search', { query: '百度大厦', region:'北京', output: 'json', city_limit: true, ak: 你的百度ak } ).then(res=> { let resultList = res.results })