基于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 相关文章推荐
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
在vue中实现echarts随窗体变化
Jul 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
javascript 常用方法总结
2009/06/03 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
pyqt5自定义信号实例解析
2018/01/31 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
实习自荐信
2013/10/13 职场文书
优质服务演讲稿
2014/05/14 职场文书
加入学生会自荐书
2015/03/05 职场文书
紧急通知
2015/04/17 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
MySQL数据库表约束讲解
2022/06/21 MySQL