基于虚拟资源的跨域问题解决方案

最近在学习vue.js的时候遇到了一个ajax跨域请求的问题，之前就知道可以用jsonp解决，但是一直没有实践过。这次发现里面有很多问题，现在就写下来，希望能给刚接触jsonp的同学一些帮助！

jsonp是什么，为什么要用jsonp，我就不多说了。不懂的同学会自己百度。

先说jQuery中的jsonp请求，当我们在vue-resource中理解jsonp的时候就很容易理解了。

这里我以json数据为例。首先，我们可以通过$，直接得到我们想要的对象。get，但是jsonp将出现如下错误代码。

$.Ajax({ URL : ' http://192 . 168 . 8 . 59/Wei invip/VIP/ERP/Home/API . ashx？a=getwxativityi=1 '，type:'GET '，dataType:'jsonp '，sccues : function(data){ console . log(data)} })

此时，我们看到控制台没有按照我们的预期输出数据，而是报告了一个错误。

此时，我们查看网络，发现数据实际上已被请求

我们可以看到请求是成功的，状态码是200，数据是返回的，但是为什么还是错了呢？

这就需要我们分析jsonp的原理：

首先，在发送ajax时，我们通常会得到一段json数据，但是JS不方便直接操作json数据。此时，jQuery已经自动为我们解析成一个JS对象；

我们都知道jsonp实际上相当于以JavaScript加载脚本的形式加载数据。

说到这里，我想有些同学大概已经明白为什么报错了。其实在这个时候，他们直接给页面添加了一个脚本，里面的内容就是返回给我们的数据

脚本src=' http :http://192 . 168 . 8 . 59/Wei invip/VIP/ERP/Home/API . ashx？a=getwxativityi=1 '/脚本现在我们再考虑一下。这段JavaScript代码实际上是一个没有意义的对象，因为不为它赋值变量就无法得到它；因此，在这个时候，我们需要后台同事的配合。我相信每个人都应该知道如何做到这一点，所以我们不会在jQuery中过多谈论ajax。

今天，我们主要讲一下jsonp在vue-resource中的跨域请求

没有太多闲言碎语，直接打码：

var VM=new Vue({ El : ' # sign record '，data:{}，before mount : FuncTion(){ this。$ http . jsonp(' http://192 . 168 . 8 . 59/Wei invip/VIP/ERP/Home/API . ashx？a=getwxativityi=1 ')。然后(函数(数据){ console.log(数据)})} })

报告了同样的错误，vue-resource也向我们报告了另一个错误。我们再来看看网络

同样，请求成功并获得了数据，但报告了一个错误。当我们关注请求头时，我们会发现还有一个参数

这个参数是干什么的？让我们看看源代码

在这里，我们可以看到回调实际上是一个随机生成的字符串，我们可以自己命名这个参数名。如果没有指定，默认为“回调”。因为，

默认情况下，它必须是有用的。

实际上，vue发送jsonp有两个参数。让我们来看看

Vue.http.jsonp (URL，{params: {pageid336029}，jsonp : ' _ callback ' })//这一步是关键。更改回调名称，其中params为要发送的数据对象，jsonp为设置回调的名称，即上面的回调名称；(不要将默认值设置为回调)，现在我们需要它

借助后台，获取我们过去发送的' _callpack '的值，并将这个值拼接到返回的json数据上，就可以了！