今天在使用Vue-resource碰到跨域请求的问题。来看报错的console:

后端服务器返回的是json的数据：

 r = json.dumps({"name":"desk","totalmoney":219})
 return HttpResponse(r, content_type='application/json')

直接通过浏览器访问发现是正常的：

控制台没有像我预料的那样输出正确的数据，这个时候在去看看network的请求状况：

我们看到请求是成功了，正常200的return code，在response栏目中看到数据也返回了，那到底是为啥报错呢？

来看看我们前端的代码：

前端请求不没有带任何的参数，但是我们在network的栏目中可以看到请求传了两个参数pageID=29&_callback=_jsonp86alw7otd3c

通过源码发现：

实际上callback是随机生成的字符串，并且这个参数名我们也可以自己给他命名，如果没指定，默认是“callback”,既然默认传递的参数，那就肯定是有用的。 
其实vue发送jsonp还有两个参数，我们来看看

Vue.http.jsonp(url,{params: {pageID:29},jsonp:"_callback"})

这里params是要发送的数据对象，jsonp是设置回调的名称，也就是上面的callback名称；（不设置默认为callback），现在我们就需要后台协助一下，获取我们发送过去的”_callpack”的值，将这个值拼接到返回的json数据上，这时候就可以了！

通过查看jsonp的百度说明发现：

jsonp实际是利用<script>元素的开放策略，动态的从其他网页来加载json数据。

用jsonp接受到的数据并不是json,是任意的javascript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

客户端期望返回的json数据是:{"name":"desk","totalmoney":219}

那么真正返回给客户端的script tags是：callbackfunction({"name":"desk","totalmoney":219})

修改前端的代码：

同时还需要修改后端的代码：

callback = request.GET.get("_callback")
result = {"name":"desk","totalmoney":219}
r = callback+"("+str(result)+")"
return HttpResponse(r, content_type='application/json')

运行结果：

参考链接：

https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

https://baike.baidu.com/item/jsonp/493658?fr=aladdin