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


Posted in Javascript onFebruary 03, 2018

最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助!

关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下。

我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp就容易明白了。

这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但是用 jsonp 就会出现报错代码如下,

$.ajax({
 url:"http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1",
 type:"GET",
 dataType:"jsonp",
 sccuess:function(data){
  console.log(data)
 }
})

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

这时候我们看到控制台并没有如我们所愿,输出data数据,而是报错了。

这个时候我们查看Network,看到实际上已经请求到了数据

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

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

我们可以看到请求成功了,状态码200,数据也返回了,但是为什么还是报错了呢?

这就要我们分析下jsonp的原理了:

首先在发送ajax的时候,正常我们是拿到了一段json数据,但是JS是不方便直接操作json数据的,这个时候jQuery已经自动帮我们解析成了一个JS对象;

我们都知道jsonp实际上是相当于用JavaScript加载脚本的方式将数据加载进来的

说到这里我想有些同学大概已经明白为什么会报错了,其实这个时候就是直接在页面中加入了一段script,里面的内容就是返回给我们的数据

<script src="http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1"></script>

现在我们再来想想,这段JavaScript代码,其实就是一段没有意义的对象了,因为没有将它赋值个一个变量,你是无法拿到;所以这个时候我们就需要后台同事的配合了,我相信说到这里,大家应该都明白怎么做了,所以jQuery的ajax我们就不多说了。

今天我们主要是说一下vue-resource 里面的jsonp跨域请求问题

闲话不多说,直接上代码:

var vm = new Vue({
 el:'#signRecord',
 data:{},
 beforeMount:function(){
  this.$http.jsonp("http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1")
  .then(function(data){
   console.log(data)
  })
 }
})

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

同样报错了,而且vue-resource还多给我们报了一个错,我们再来看看network

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

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

同样请求成功,数据也拿到了,但是就是报错。我们注意看一下请求头,会发现多了一个参数

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

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

这个参数是干嘛的呢?我们看看源码

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

这里我们可以看到,实际上callback是随机生成的字符串,并且这个参数名我们也可以自己给他命名,如果没指定,默认是“callback”,既然

默认传递的参数,那就肯定是有用的。

其实vue发送jsonp还有两个参数,我们来看看

Vue.http.jsonp(url,{params: {pageID:29},jsonp:"_callback"}) //这步就是关键,改callback名

这里params是要发送的数据对象,jsonp是设置回调的名称,也就是上面的callback名称;(不设置默认为callback),现在我们就需要

后台协助一下,获取我们发送过去的"_callpack"的值,将这个值拼接到返回的json数据上,这时候就可以了!

Javascript 相关文章推荐
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 #Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 #Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 #Javascript
JavaScript实现求最大公共子串的方法
Feb 03 #Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 #Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 #Javascript
JS删除数组里的某个元素方法
Feb 03 #Javascript
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
python删除文件示例分享
2014/01/28 Python
使用python 获取进程pid号的方法
2014/03/10 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python db类用法说明
2020/07/07 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
C#公司笔试题
2014/03/28 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
教育局长自荐信范文
2013/12/22 职场文书
财务科科长岗位职责
2014/03/10 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
Redis 配置文件重要属性的具体使用
2021/05/20 Redis