基于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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
php中的异常和错误浅析
2017/05/03 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP中16个高危函数整理
2019/09/19 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
Angular4表单验证代码详解
2017/09/03 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python 生成器协程运算实例
2017/09/04 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
解决DataFrame排序sort的问题
2018/06/07 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python 绘制国旗的示例
2020/09/27 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
仓库文员岗位职责
2014/04/06 职场文书
校外活动方案
2014/08/28 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis