【Vue】vue工程使用vue-jsonp组件完成跨域请求

最近在工作中遇到了一个jsonp跨域请求的问题，由于是vue前端工程不是很熟悉，走了很多弯路，在此分享问题解决过程用以作前车之鉴。

1. 具体步骤

1. 在vue工程中安装vue-jsonp组件

npm install vue-jsonp

2. 在main.js中导入并安装vue-jsonp

import Vue from 'vue'  //vue项目一般都存在了
import VueJsonp from 'vue-jsonp'
Vue.use(VTooltip)

3. 代码中使用vue-jsonp组件的方法

this.$jsonp(url,params).then(response => {
	//此处写接收到返回参数后的相应代码逻辑            
	//response即为接口返回值
 }).catch(error => {
  console.log('jsonp跨域访问出错!')
 }
)

2. 遇到的问题

问题：
通过上述步骤请求相应的jsonp接口，出现Uncaught ReferenceError ：某方法 is not defined的问题

原因：
使用postman请求该接口，发现该接口返回值并不是一个json串，返回内容是一个方法，里边包裹着规整的数据，返回内容形如：callbackMoon({“name”:john,“age”,4})。由于jsonp的原理是：客户端会注册一个callback（回调函数）函数名，在请求时会将该函数名与其他请求参数一块传递给服务端，服务端接收到相应的callback函数名以及其他参数后，将会以js中方法调用的形式返回一个串(EP：方法名（json串）)…如果未指定callback名称，则会默认一个回调函数名，如果指定了回调函数名，而本地没有定义，则会出现这种未定义的错误，那么定义一个回调函数就好了

解决：

this.$jsonp(url,params).then(response => {
	//此处不写任何代码
	//因为会直接调用返回的那个回调函数
	//只需要定义一个回调函数就好
 }).catch(error => {
  console.log('jsonp跨域访问出错!')
 }
)

假设指定的回调函数名是callBackMoon，则需要在method中定义一个同名方法如下：

export default{
	data（）{
		return {}
	}，
	methods： {
	//定义指定名称的回调函数
		callBackMoon（data）{
			console.log("定义的回调函数")
		}
	}
}

但是这样定义完依旧会报错，因为上边定义的是vue对象的方法，回调函数应该是属于window对象的，所以还需要将vue对象中的callBackMoon方法绑定当window对象(若是普通的js文件，则在<script>标签中定义直接定义一个callBackMoon方法就行)，代码如下：

export default{
	data（）{
		return {}
	}，
	mounted: function () {
	//将callBackMoon方法绑定到window对象
      window['callBackMoon'] = (data) => {
        this.callBackMoon(data)
      }
    }，
	methods： {
		//定义指定名称的回调函数
		callBackMoon(data){
			console.log("定义的回调函数")
		}
	}
}

3. 写在最后的

解决跨域请求的方式有很多中，jsonp方式也是比较常见的一种，主要是动态添加一个<script>标签，利用其src属性没有跨域限制来实现的跨域请求，用起来还是很方便的，需要注意的是，jsonp方式解决跨域问题，只适用于GET请求，不支持其他类型的HTTP请求，也不支持不同域的两个页面互相进行js调用的问题。

---

参考文章：

1. 在vue中使用Jsonp
2. JSONP跨域访问API接口深入理解
3. js跨域交互之jsonp
4. JSONP解决跨域请求以及其工作原理和代码实现