Vue从了解到清晰-Vue2.0中使用vue-jsonp解决跨域问题

最新推荐文章于 2025-09-12 16:56:11 发布

原创最新推荐文章于 2025-09-12 16:56:11 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并使用vue-jsonp插件来处理JSONP跨域请求。从命令行安装插件开始，到在main.js中引入并使用插件，再到具体组件中调用jsonp方法获取数据的全过程。同时提供了多个实例，包括参数传递及错误处理的方法。

1、执行命令：

1	`npm install vue-jsonp --save`

2、src/main.js中添加：

import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

3、其它组件中基本使用方法：

this.$jsonp(rootApi+'/company/Info'', 传参参数对象{} ).then(json => {
　　// 返回数据 json， 返回的数据就是json格式
}).catch(err => {
　　console.log(err)
})

4、其他实例：

4.1：

this.$jsonp(ApiRoot+'/company/Info', 
{
　　callbackQuery: 'callbackParam', // jsonp key //请求传递参数 1
　　callbackName: 'jsonpCallback', // jsonp key //请求传递参数 2
　　name: 'zhangsan', //请求传递参数 3
　　type: 6 //请求传递参数 4
} 
).then(json => {
　　// 返回数据 json， 返回的数据就是json格式
}).catch(err => {
　　console.log(err)
})

4.2：

this.$jsonp(ApiRoot+'/company/Info', 
　　Object.assign(this.$store.state.common, {callbackQuery: 'callbackParam', callbackName: 'jsonpCallback'})
).then(json => {
　　_this.pageData = json.result
}).catch(err => {
　　console.log(err)
})

----

说明：Object.assign() 为 es6 javascript对象方法，功能是合并多个对象数据