vue 使用 vue-jsonp 解决跨域请求问题（访问百度地图API）

目录

​​vue-jsonp的跨域请求原理​​

​​1. 安装 vue-jsonp​​

​​2. 在 main.js中导入 vue-jsonp​​

​​3. 在 .vue 文件中使用 ​​

---

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
})