文档章节

AJAX跨域调用相关知识-CORS和JSONP(引)

辉煌霸猪
 辉煌霸猪
发布于 06/26 09:28
字数 2090
阅读 15
收藏 0

AJAX跨域调用相关知识-CORS和JSONP

1、什么是跨域

跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议、域名、端口)的内容。

但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去访问另一个服务器并返回数据,这时候就会受到浏览器跨域的安全限制了。


这里要注意,如果只是通过AJAX向另一个服务器发送请求而不要求数据返回,是不受跨域限制的。浏览器只是限制不能访问另一个域的数据,即不能访问返回的数据,并不限制发送请求。

我们接下来就为大家讲解最常见的跨域AJAX调用的解决方案,首先我们先准备一个测试环境:

一个可以正常启动的Tomcat,默认端口8080;
下载示例代码包ajax-cors-jsonp.zip,解压到Tomcat的webapps下,示例代码包中有test-client和test-service两个文件夹,分别包含我们示例的客户端和服务端代码;
模拟一个多域环境,修改“C:\Windows\System32\drivers\etc\hosts”(如果文件不能编辑保存,需要在文件属性中去掉只读),在文件内容后面追加:
127.0.0.1       www.aaa.com
127.0.0.1       www.bbb.com

启动Tomcat后,在浏览器中,分别测试

http://www.aaa.com:8080/test-client/index.html

 

http://www.bbb.com:8080/test-client/index.html

 

两个页面是相同的,只是地址不同,都是在点击按钮后通过AJAX去访问http://www.bbb.com:8080/test-service/add.jsp。但是从www.aaa.com:8080访问时就返回了error,即浏览器不允许在www.aaa.com:8080的页面中通过AJAX获取来自www.bbb.com:8080服务器的返回数据。

大家观察一下Tomcat控制台,会发现从www.aaa.com:8080访问时,虽然返回了错误,但服务端代码其实还是执行了。这个现象验证了跨域是可以发请求的,但是浏览器出于安全的原因不让我们在JS中获取返回数据。

测试案例很简单,就是传入a=15&b=10两个参数,返回两个数据的和25,代码参见:

test-client/index.html

test-service/add.jsp

2、CORS方案

本节介绍的CORS(Cross-Origin Resource Sharing)方案是W3C在2014年正式推出的跨域访问方案,是真正的官方解决方案。这个方案的实现非常简单,只需要在服务端返回的头部信息中标明是否允许跨域访问,以及允许哪些域访问即可。

接下来我们访问

http://www.aaa.com:8080/test-client/index_cors.html

 

成功了!!!我们来看代码中有什么改变?

index_cors.html与index.html的差异仅是ajax调用的地址从add.jsp换成了add_cors.jsp,我们再来看add.jsp和add_cors.jsp的区别,会发现只增加了一行代码:

response.setHeader(“Access-Control-Allow-Origin”, “http://www.aaa.com:8080″);

如果不限定跨域访问的地址,可以把域名部分设置为*:

response.setHeader(“Access-Control-Allow-Origin”, “*”);

小结:

CORS方案实现非常简单,只要服务在头部标明允许跨域访问即可。但是这个方案由于推出时间较晚,所以IE9及以下浏览器并没有支持这个机制。

IE9及以下浏览器在安全设置里控制是否允许跨域数据访问:

 

默认是上面的选项是禁用的,需要手动启用。同时,由于jQuery自动判断并认为当前浏览器不支持跨域,所以我们还需要用一行代码让jquery支持跨域ajax:

$.support.cors = true;

3、JSONP方案

JSONP并不是一个官方协议,其本质上是一种巧妙的跨域获取JSON数据的编程技巧。

我们首先来看实现,JSONP在实现上要比CORS稍微麻烦一点点,前后端要有点配合。

首先运行http://www.aaa.com:8080/test-client/index_jsonp.html,这个页面里面AJAX后端请求换成了add_jsonp.jsp。

 

接下来我们先解析代码:

index_jsonp.html中,我们在$.ajax的参数上有点变化:

type改成了get,JSONP只支持get请求,这个参数在JSONP场景下其实是可以忽略的,即使改成post,也会依然按get模式;
dataType改成了jsonp,这个参数标明要采用JSONP方式进行调用;
jsonp: “x5callback”,这个参数其实是一个约定的参数名,用于后端按照这个参数名获取一个回调函数名;
jsonpCallback:这个参数用来指定上面那个参数对应的回调函数名,如果不指定,jQuery会自动生成一个随机的函数名。
add_jsonp.jsp中,我们在最后数据返回部分做了一点处理:

首先我们按照约定的参数名,获取回调函数名;
String callbackName = request.getParameter(“x5callback”);
返回的内容格式也不再仅是一个JSON数据,而是一个JS的函数调用形式:回调函数名(JSON数据)
String jsonpResult = String.format(“%s(%s)”, callbackName, jsonResult);
前后端需要做的工作就是这么多,但是这时候初学者一定觉得有点迷惑了,这个回调函数名到底是干什么用的?我们并没有定义什么回调函数啊?它是怎么工作的呢?

我们简单的加一个调试很快就可以解开这个疑惑,在add_jsonp.jsp最终返回的数据中加一个debugger:

String jsonpResult = String.format(“debugger;%s(%s)”, callbackName, jsonResult);

接下来我们F12启动浏览器开发者工具,点击按钮后就会进入JS调试。

 

这时候我们看到返回的是一个JS函数的调用,函数名是随机的,函数的参数就是那个我们构造的JSON。接下来,我们在控制台输入window.函数名,会发现这个函数是真实存在的!!!

这是怎么回事呢???原来jQuery所谓的JSONP模式,其实是动态创建了一个<script>标签,标签的src属性指向一个URL(http://www.bbb.com:8080/test-service/add_jsonp.jsp?x5callback=jQuery18203749695811420679_1439276096319&a=15&b=10&_=1439276101932),这个URL里面除了包含我们的a和b两个参数,还包含一个x5callback参数,参数的值就是那个随机的函数名。这个script标签动态插入到当前页面后,自然就会将我们返回的内容当做JS加载到当前页面(这里我们返回的是JS,浏览器是不阻止的哦,页面可以从任何域加载JS脚本):

debugger;jQuery18203749695811420679_1439276096319({“sum”: 25})

加载后,按照JS的特性,这些代码会立即执行。而jQuery在这个之前已经动态创建了一个以随机函数名为名称的全局函数,用于接收返回数据,再往后jQuery通过一系列的逻辑代码最终把返回值给到了我们的success回调函数中。

有关jQuery动态创建<script>相关的逻辑,大家可以在我们案例自带的jquery-1.8.2.js的8270行加上断点进行跟踪。

小结:

JSONP是以动态创建script标签为基础的一种编程技巧,来实现跨域获取JSON数据。

支持目前所有浏览器,只是在实现方式上需要前后端代码有一点约定配合。

但是,要注意由于JSONP是以script标签的src属性加载的,因此参数会收到URL长度的限制,只能适用于传入参数内容不多的场景。

4、总结

CORS方案实现简单,同时支持GET和POST请求,但是不支持IE9及以下浏览器。这时看官要问了,这么多浏览器不支持,这技术怎么用啊?手机啊!目前市面上所有的手机浏览器是全部支持CORS的,如果是为手机提供跨域服务CORS就够了。

JSONP方案实现需要前后端配合,支持GET请求,支持所有浏览器,只是传入的参数内容受限于URL长度限制。

© 著作权归作者所有

辉煌霸猪
粉丝 10
博文 65
码字总数 70829
作品 0
郑州
程序员
私信 提问
Web前端学习笔记之前端跨域知识总结

0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录。...

时光飞逝,逝者如斯
2018/08/08
0
0
web跨域解决方案

阅读目录 什么是跨域 常用的几种跨域处理方法: 跨域的原理解析及实现方法 总结 摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自...

幕三少
2016/09/01
0
0
javascript 跨域的几种情况

JavaScript 中的跨域问题 http://yijiebuyi.com/A.js http://yijiebuyi.com/B.js 上面情况在同一域名下,不同资源文件 [允许跨域] http://yijiebuyi.com/blog/A.js http://yijiebuyi.com/job......

一介布衣
2016/09/08
0
0
Web APi之手动实现JSONP或安装配置Cors跨域(七)

前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器、Action方法,以及过滤器、模型绑定等等,想想也是心...

jeffcky
2015/09/25
0
0
CORS(Cross-Origin Resource Sharing) 跨域资源共享

CORS(Cross-Origin Resource Sharing) 跨域资源共享 CORS 全称:Cross-Origin Resource Sharing 中文意思:跨域资源共享? 好吧,目前中文方面的资料还比较少,能搜索到的那仅有的几篇相关介...

我是小强
2013/06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

进程命令pgrep

命令pgrep 名称缩写: Process Grep 用途: 进程检索,以名称为依据从运行进程队列中查找进程,并显示查找到的进程id 语法: ]# pgrep [选项] 参数 选项: -d, --delimiter <string> 指定输出分...

迷失De挣扎
1分钟前
0
0
rest 的理解

rest:表现层状态转移。 什么是restful协议?https://en.wikipedia.org/wiki/Representational_state_transfer 使用restful的好处。 Rest是一种体系结构样式,他定义了一组用于创建web服务的...

xiaoxiao_go
8分钟前
0
0
聊聊spring cloud的CachingSpringLoadBalancerFactory

序 本文主要研究一下spring cloud的CachingSpringLoadBalancerFactory CachingSpringLoadBalancerFactory spring-cloud-openfeign-core-2.2.0.M1-sources.jar!/org/springframework/cloud/o......

go4it
昨天
4
0
一篇文章搞定——JDK8中新增的StampedLock

一、StampedLock类简介 StampedLock类,在JDK1.8时引入,是对读写锁ReentrantReadWriteLock的增强,该类提供了一些功能,优化了读锁、写锁的访问,同时使读写锁之间可以互相转换,更细粒度控...

须臾之余
昨天
4
0
Android Camera原理之CameraDeviceCallbacks回调模块

在讲解《Android Camera原理之openCamera模块(二)》一文的时候提到了CameraDeviceCallbacks回调,当时没有详细展开,本文我们详细展开讲解一下。 CameraDeviceCallbacks生成过程: 《Android...

天王盖地虎626
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部