本文介绍在Vue项目中通过vue-jsonp插件解决跨域请求的方法。涵盖npm或yarn安装步骤，main.js中的全局注册配置，以及如何在组件中调用接口并处理返回的回调函数。
前言
在开发手写输入法功能时，调用QQ输入法接口遇到了跨域限制，传统的代理方案未能生效，因此决定采用JSONP方案。关于JSONP的具体原理可参考相关资料vue-jsonp，本文重点记录该插件的实际应用及注意事项，完整文档请查阅npm仓库。
安装依赖
npm install vue-jsonp -S
或者使用yarn进行安装
yarn add vue-jsonp
基本用法
在main.js中进行引入配置
// main.js
import Vue from 'vue'
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp) // $jsonp被挂载到vue原型上,可直接使用vm.$jsonp()
当前使用的包版本为2.0.0，导入时务必使用大括号进行解构赋值。网上部分教程可能基于旧版本，具体用法建议参考前言中提到的npm官方地址。
在Vue组件中使用
this.$jsonp('/some-jsonp-url', {
myCustomUrlParam: 'veryNice'
}).then(res => {
// 此处代码不执行
// 因为会直接调用返回的那个回调函数
})
若接口返回的回调函数名为callbackFun，则需要在window对象上预先绑定该函数。
mounted() {
// 将callbackFun方法绑定到window对象
window['callbackFun'] = (data) => {
cosole.log('定义的回调函数')
}
// 假设返回的为callbackFun.ajax_callback()
window['callbackFun'] = {
ajax_callback: function (res) {
cosole.log('定义的回调函数')
}
}
}
需注意，JSONP请求仅支持GET方法。
以上就是关于在Vue中使用jsonp的详细介绍，更多相关技术内容欢迎查阅本站往期文章或继续关注后续更新，感谢大家的支持。