vue-resource ajax跨域,基于Vue-resource jsonp跨域问题的解决方法_婳祎_前端开发者

最近在学习

关于什么是jsonp,以及为什么要用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)

}

})

9f327777428cfc743262e5f94888289c.png

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

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

ee1cf1ac85aa7dbb1210a8ebc52506c1.png

aec62ed048e85ba174bc97745278b0ad.png

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

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

首先在发送ajax的时候,正常我们是拿到了一段json数据,但是

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

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

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

今天我们主要是说一下

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

var vm = new

a78261a7a0536cfa63a22dc6a9d10177.png

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

0be3fbd36ed5a48f84ed70c9c74c4d2d.png

36d04f3f866997eb18323eb44b03291d.png

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

90f7196bf19757d515977451702b840c.png

023f0d586d951d19f4f9caabaf0d7ae9.png

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

aa5ed649c759675d0f059d3516ca9a60.png

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

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/351249.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kali Linux 2016.2初体验

前言 Kali Linux官方于8月30日发布Kali Linux 2016的第二个版本Kali Linux 2016.2。该版本距离Kali Linux 2016.1版本发布,已经有7个月。在这期间,在Kali Linux 2016.2版本发布的这段时间,Kali Linux官方增补了94个更新。 主要的更新大概是这…

ajax servlet增删改查,Servlet ajax 文件上传和JDBC+Servler用户表增删改查

昨天晚上帮一个妹子,应该是大二或者大三的。解决了ServletJDBC实现用户表的增删改查功能,当时妹子遇到的问题是文件上传和日期格式处理不太会。我让她把代码发我,我本地调试,结果发现坑很多,就是很多细节问题。不过对于…

1065 单身狗

“单身狗”是中文对于单身人士的一种爱称。本题请你从上万人的大型派对中找出落单的客人,以便给予特殊关爱。 输入格式: 输入第一行给出一个正整数 N(≤ 50 000),是已知夫妻/伴侣的对数;随后 N 行&#xff…

不,保持警惕不会伤害Java。 关于Java许可的评论。

所以。 Oracle希望通过Java赚钱。 然后,The Register发表了一篇非常对立的文章,上面有一个超级吸引人的标题。 根据他们的消息来源,“ Oracle正在大力加强对其声称违反其许可证的Java客户的审计”。 当Twitter诗句对人们批评甲骨文的行为持批…

移动端ajax,jQuery基于$.ajax设置移动端click超时处理方法

本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法。分享给大家供大家参考,具体如下:这里介绍jquery click事件如何在移动端自动转换成touchstart事件。因为移动端click事件会比touchstart事件慢几拍移动设备某个元素上事件执行顺序是&#xf…

Python单例模式的4种实现方法

[python] view plaincopy #-*- encodingutf-8 -*- print ----------------------方法1-------------------------- #方法1,实现__new__方法 #并在将一个类的实例绑定到类变量_instance上, #如果cls._instance为None说明该类还没有实例化过,实例化该类,并返回 #如果cl…

java虚拟机-程序计数器PC Register

什么是程序计数器? 程序计数器是一块 较小 的内存空间,它可以看做是当前线程所执行的字节码的 行号指示器 ;在虚拟机的概念模型里(仅仅是概念模型,各种虚拟机可能会通过一些更高效的方式去实现)&#xff0c…

织梦ajax表单提交参数错误,【织梦二次开发】织梦jquery+ajax方式提交自定义表单...

我们在dedecms教程中学到很多,比如可以借助jquery ajax提交dedecms自定义表单到后台。此例只做为参考,实际项目中根据自己的情况酌情修改。html部分:姓名:电话:留言:js部分:function send(){$.a…

R-Tree空间索引算法的研究历程和最新进展分析

摘要:本文介绍了空间索引的概念、R-Tree数据结构和R-Tree空间索引的算法描述,并从R-Tree索引技术的优缺点对R-Tree的改进结构——变种R-Tree进行了论述。最后,对R-Tree的最新研究进展进行了分析。 关键词:空间索引技术&#xff1b…

Git同时使用不同平台代码仓库

问题描述 公司项目使用代码仓库为gitinn/gitlab等,个人项目使用github进行托管,而公司项目和个人项目设置的邮箱和用户名是不同的,而ssh的密钥对又是基于这两个信息生成的,所以此时想要同时使用两个平台的代码仓库,则会…

java签署ssl_签署Java代码

java签署ssl在上一篇文章中,我们讨论了如何保护移动代码 。 提到的措施之一是签名代码。 这篇文章探讨了Java程序如何工作。 数字签名 数字签名的基础是密码学 ,特别是公钥密码学 。 我们使用一组加密密钥:私有密钥和公共密钥。 私钥用于…

服务器中有两个R文件夹,一台服务器中配置多个git sshkey

需求背景:GitHub上有两个项目,需要拉取到同一台服务器,并且都需要通过ssh的方式拉取假设两个项目分别叫: proj1 和 proj2一、分别生成 ssh key# 先生成 proj1 的 sshkey$ ssh-keygen -t rsa -C "888888qq.com"image.png…

1-26HashSet简介

Set的特点 Set里面存储的元素不能重复,没有索引,存取顺序不一致。 package com.monkey1024.set;import java.util.HashSet;/*** Set的特点:元素不能重复,没有索引,存取顺序不一致**/ public class HashSetTest01 {publ…

C++ 异常 与 ”为什么析构函数不能抛出异常“ 问题

C 用异常使得可以将正常执行代码和出错处理区别开来。 比如一个栈,其为空时,调用其一个pop 函数,接下来怎么办? 栈本身并不知道该如何处理,需要通知给其调用者(caller),因为只有调用…

适用于Java开发人员的Groovy吗? 认识Gradle,Grails和Spock

Java开发人员最感兴趣的Groovy用例有哪些? 尽管已经存在了一段时间,但是似乎只有Groovy最近才开始使用Groove。 对于某些人来说,它基本上只是另一种深奥的JVM语言,但是由于一些流行的工具可以帮助您使用Java,因此它比…

批量获取服务器cpu信息,获取服务器的cpu利用率

你得到的错误是什么?这就是我正在使用同样的东西(剥离了一下)。它显示每物理处理器的负载。strComputer "."Dim arrProcessors : ReDim arrProcessors(2,0)Set objWMIService GetObject("winmgmts:" _& "{impersonationLevelimperso…

CEPH FILESYSTEM

参考文档: CEPH FILESYSTEM:http://docs.ceph.com/docs/master/cephfs/ CephFS best practices:http://docs.ceph.com/docs/master/cephfs/best-practices/ MDS STAT:http://docs.ceph.com/docs/master/cephfs/mds-states/ Mount …

条款11 在operator=中处理“自我赋值”

“自我赋值”发生在对象被赋值给自己时: 1 classWidget {...}; 2 Widget w; 3 ... 4 w w; //赋值给自己这看起来有点愚蠢,但它合法,所以不要认定客户绝不会那么做。此外赋值动作并不总是那么可被一眼辨认出来,例如: a[…

定时器实现方式之TimerTask、Timer

在未来某个指定的时间点或者经过一段时间延迟后执行某个事件,这时候就需要用到定时器了。定时器的实现方式有很多种,今天总结最简单的实现方式。java 1.3引入了定时器框架,用于在定时器上下文中控制线程的执行,其由类Timer和Timer…

jaxb 处理_休息使用Jersey –包含JAXB,异常处理和客户端程序的完整教程

jaxb 处理最近,我开始使用Jersey API开发一个Restful Web服务项目。 在线提供了一些教程,但是我遇到了异常处理方面的一些问题,而且在使用JaxB并提供异常处理方法的完整项目中找不到任何地方。 因此,一旦我能够使用带有异常处理和…