基于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代码要注意的几条规则
Sep 10 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
利用python分析access日志的方法
Oct 26 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 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
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
python aiohttp的使用详解
2019/06/20 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
安全生产计划书
2014/05/04 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
解决python3安装pandas出错的问题
2021/05/20 Python