ajax 跨域请求 vue-resource jsonp跨域_vue $.ajax 跨域-程序员宅基地

技术标签： jsonp  vue  ajax  jquery  

ajax 跨域请求 vue-resource jsonp跨域

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

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

  1. 我们先来说一下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)
    }
})

这里写图片描述

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

这个时候我们查看Network，看到实际上已经请求到了数据
这里写图片描述

这里写图片描述

我们可以看到请求成功了，状态码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还多给我们报了一个错，我们再来看看network

这里写图片描述
这里写图片描述

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

这里写图片描述
这里写图片描述

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

这里写图片描述

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

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

这里params是要发送的数据对象，jsonp是设置回调的名称，也就是上面的callback名称；（不设置默认为callback），现在我们就需要后台协助一下，获取我们发送过去的”_callpack”的值，将这个值拼接到返回的json数据上，这时候就可以了！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuqing_1/article/details/53858447

智能推荐

c# 中DataSet示例_c# dataset实例-程序员宅基地

文章浏览阅读787次。1.获取信息 #region 产生学生列表 /// /// 产生学生列表 /// private void GenStudentList(string strStu) {_c# dataset实例

我所经历的大数据平台发展史1:非互联网时代-上篇-程序员宅基地

文章浏览阅读930次。origin: http://www.linuxeden.com/html/news/20160222/164888.html编者按：本文是松子（李博源）的大数据平台发展史系列文章的第一篇（共四篇），本系列以独特的视角，比较了非互联网和互联网两个时代以及传统与非传统两个行业。是对数据平台发展的一个回忆，对非互联网、互联网，从数据平台的用户角度、数据架构演进、模型等进行了阐述。前言，_我所经历的大数据平台发展史

css3卡片前后无限循环翻转效果_卡片翻动效果-程序员宅基地

文章浏览阅读370次，点赞2次，收藏3次。【代码】css3卡片前后无限循环翻转效果。_卡片翻动效果

Linux pstree命令教程：进程树的展示和管理(附实例详解和注意事项)_linux 安装pstree-程序员宅基地

文章浏览阅读1.1k次，点赞10次，收藏11次。pstree是一个Linux命令，它以树状图的形式显示运行中的进程。这种树状图的格式比ps命令更直观，使输出更具视觉吸引力。_linux 安装pstree

linux poweroff无法关机,linux关机重启六种方法(sysrq shutdown halt init ipmi poweroff)-程序员宅基地

文章浏览阅读2.7k次。linux关机重启六种方法(sysrq shutdown halt init ipmi poweroff)我的博客已迁移到xdoujiang.com请去那边和我交流linux关机重启六种方法(sysrqshutdownhaltinit)当前版本cat/etc/debian_version5.0.1一、linux关机命令(前四种)1、shutdown-hnow(-h:haltafter..._linux poweroff关机失败,poweroff -f关机成功

Mac电脑使用：终端的管理员用户和普通用户的自由切换方式_mac 终端切换交互方式-程序员宅基地

文章浏览阅读7.8k次，点赞6次，收藏11次。作为一名IT民工来说，对于电脑的各种操作都需要熟练掌握，不仅要学会Windows电脑的操作，更要学会Mac电脑的操作，不同的操作系统，有些操作是不一样的，就拿终端命令行来说，Windows系统的cmd和Mac系统自带的终端就不一样。 由于觉得Windows系统的cmd命令工具用着不习惯，所以本篇博文只来分享一下Mac电脑系统下自带的终端的关于管理员用户的切换方法，这个知识点虽然比较..._mac 终端切换交互方式

随便推点

计算机主机与外部接口,核心与外部设备间接口-程序员宅基地

文章浏览阅读1.6k次。在对计算机核心部分的工作原理有了相当的认识之后，我们在应该知道一台计算机仅仅有中央处理器和内存是不够的，它当然能够运转起来，但并没有什么大用。如果按照老式的方法，你得用开关把程序指令一条一条地写入存储器，而早期确实是这么干的。如果让计算机很好地为我们所用那就不得不说说输入和输出设备了。专业地说，输入输出设备又称为I/O设备，这是因为“输入”和“输出”分别对应于英语单词“Input”和“Output..._cpu 的外部接口是连接外部设备的关键资源,常见的的外部协议接口有哪些

UnityShader17：光照属性与阴影_lighting_coords-程序员宅基地

文章浏览阅读1.5k次，点赞4次，收藏10次。前置：UnityShader16：点光源和聚光灯一、一些重要的光照、阴影属性一个一个来（绿色的部分暂时可以不用了解）：Type：光照类型，除了常用的3个，还有一个面光源 Color：光照颜色 Mode：光照模式：实时光照/混合/烘培光照 Intensity：光照强度 Indirect Multiplier：在计算该灯光所产生的间接光照时的强度倍乘 Shadow Type：阴影类型：无阴影/硬阴影/软阴影 Cookie：用于光照投影的纹理 Cookie Size：Cooki..._lighting_coords

CSS3 平面 2D 变换+CSS3 过渡-程序员宅基地

文章浏览阅读2.1k次，点赞104次，收藏87次。HTML5和CSS3-19(20)-1(3)

归一化 （Normalization）、标准化 （Standardization）和中心化/零均值化 （Zero-centered）,BN,Batch,批归一化,从归一化到批归一化_组均值和总均值中心化-程序员宅基地

文章浏览阅读1.4w次，点赞20次，收藏91次。目录1.引言:一些基本概念,2.为什么要进行归一化?归一化两个的优点3.为什么要标准化?标准化的好处?4.归一化和标准化的区别5.什么时候用归一化？什么时候用标准化？6. 哪些模型必须归一化/标准化？7、逻辑回归必须要进行标准化吗？8. 为什么需要批归一化(BN)？9. BN的好处10、BN的原理11、BN到底解决了什么Reference:..._组均值和总均值中心化

DataV构建大屏（全屏）数据展示页面_datav大屏-程序员宅基地

文章浏览阅读1.8w次，点赞20次，收藏189次。官方文档地址：DataV1.安装组件库npm安装 npm install @jiaminghi/data-view 2.使用 全局引入// 将自动注册所有组件为全局组件import dataV from '@jiaminghi/data-view'Vue.use(dataV)按需引入按需引入仅支持基于ES module的tree shaking，按需引入示例如下：import { borderBox1 } from '@jiaminghi/data-view'V_datav大屏

LSTNet--结合时间注意力机制的LSTM模型（附源码）-程序员宅基地

文章浏览阅读2.8w次，点赞31次，收藏407次。一、引言 LSTM出现以来，在捕获时间序列依赖关系方面表现出了强大的潜力，直到Transformer的大杀四方。但是，就像我在上一篇博客《RNN与LSTM原理浅析》末尾提到的一样，虽然Transformer在目标检测、目标识别、时间序列预测等各领域都有着优于传统模型的表现，甚至是压倒性的优势。但Transformer所依赖的Multi-Head Attention机制给模型带来了巨大的参数量与计算开销，这使得模型难以满足实时性要求高的任务需求。我也提到，LSTM想与Transformer抗..._时间注意力机制

推荐文章

热门文章

相关标签