vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
原创
©著作权归作者所有:来自51CTO博客作者朝阳39的原创作品,请联系作者获取转载授权,否则将追究法律责任
目录
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
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
})