基于vue-resource jsonp跨域问题的解决方法

基于vue-resource进行跨域请求时会存在一些问题，其中最常见的就是会因为浏览器同源策略的限制而导致请求失败。为了解决这个问题，可以使用JSONP技术进行跨域请求。

JSONP是什么?

JSONP(JSON with padding)是一种前端跨域解决方案。

JSONP的原理是利用 script 标签没有跨域限制这个特性。例如在本地jsp向http://www.baidu.com/s?wd=xxx发送一个请求。由于是跨域请求，请求失败。但是如果请求地址变成http://www.baidu.com/s?wd=xxx&cb=jsonpCallback,就可以正常请求并响应返回了。

这时候是需要服务端在返回的时候去调用一个传递进去的回调函数，例如把响应的内容封装为json串作为参数，插入到回调函数中即可。可以看到，JSONP的原理就是利用一个中间层来传递数据，这个中间层就是回调函数。

基于vue-resource的JSONP跨域请求解决方法

首先需要安装vue-resource：

npm install vue-resource --save

在Vue项目的入口文件main.js中引入并使用vue-resource插件：

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

接着创建一个Vue的实例，发送JSONP请求：

this.$http.jsonp(url, {
    params: {
        //请求参数
    }
}, {
    jsonp: 'callbackFn' //指定请求参数名称
}).then((response) => {
    //请求成功的处理
}).catch((response) => {
    //请求失败的处理
})

其中，url为请求的地址；params为请求的参数；jsonp为JSONP回调函数的参数名（可以自定义）。

注意：如果服务端没有指定回调函数名，JSONP会自动给指定一个名字，通常是一个随机的函数名。

示例说明

1. 请求开源API服务

以请求开源API服务为例，假设该服务可以通过以下URL获取数据：

https://api.github.com?callback=jsonpCallback

则可以在Vue的方法中进行JSONP请求：

this.$http.jsonp('https://api.github.com', {
    params: {
        callback: 'jsonpCallback' //指定回调函数的名称
    }
}, {
    jsonp: 'callback' //指定回调参数名
}).then((res) => {
    console.log(res.body) //打印响应数据
}).catch((res) => {
    console.error('Error:', res.status)
})

这样就可以通过JSONP的方式请求该服务，并获得响应数据。

2. 请求示例代码库

下面再以请求示例代码库为例，假设该服务可以通过以下URL获取数据：

https://api.github.com/repos/vuejs/vue/commits?callback=jsonpCallback

同样，也可以在Vue的方法中进行JSONP请求，代码如下：

this.$http.jsonp('https://api.github.com/repos/vuejs/vue/commits', {
    params: {
        callback: 'jsonpCallback'
    }
}, {
    jsonp: 'callback'
}).then((res) => {
    console.log(res.body)
}).catch((res) => {
    console.error('Error:', res.status)
})

这样就可以通过JSONP的方式请求示例代码库，并获得响应数据。

至此，基于vue-resource实现JSONP跨域请求的解决方法就讲解完毕了。