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长度限制。
引自:http://wex5.com/cn/ajax-cors-jsonp/
下载资源:ajax-cors-jsonp.zip
AJAX跨域调用相关知识-CORS和JSONP(引)的更多相关文章
-
WeX5 - AJAX跨域调用相关知识-CORS和JSONP
http://docs.wex5.com/ajax-cross-domain/ 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容 ...
-
AJAX跨域调用相关知识-CORS和JSONP
1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去 ...
-
前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
-
jquery ajax跨域调用
客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...
-
以短链服务为例,探讨免AppKey、免认证、Ajax跨域调用新浪微博API
新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...
-
AJAX跨域调用ASP.NET MVC或者WebAPI服务
关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案 作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP. ...
-
支持ajax跨域调用的WCF搭建示例
支持ajax 跨域调用的WCF搭建 1.新建一个"ASP.NET空Web应用程序"项目. 2.新建一个“WCF服务(支持ajax)”. 3.修改WCFAjaxService.svc ...
-
AJAX跨域调用ASP.NET MVC的问题及解决方案
AJAX跨域调用ASP.NET MVC的问题及解决方案 问题描述: 解决方法: 只需要在web.config中添加如下标为红色的内容即可: <system.webServer> <h ...
-
调用ajax 跨域调用接口
//ajax 跨域请求数据 function ajaxType (){ $.ajax({ url: "http://127.0.0.1:9090/spring_mvc/HttpClient/ ...
随机推荐
-
MySQL环境部署
阅读目录: 1.Windows下安装MySQL 2.Linux下安装MySQL 序章: MySQL是个小型的数据库,用来自己做小项目,做学习练习什么的再适合不过了,不过新手总会被一些莫名奇妙的问题难住 ...
-
#CSDN刷票门# 有没有人在恶意刷票?CSDN请告诉我!用24小时监控数据说话!
特别声明: 此次并非针对其他参与2013中国十大优秀开源项目的同行,体系有漏洞要谴责的是制定规则并从中获益但不作为的权贵,草根们制定不了规则但可发现和利用漏洞,这是程序员应有反叛精神没错.但被作为道具 ...
-
Java 一维数组 二维数组 三维数组
二维数组包含一位数组 三维数组就是在二维数组的基础上,再加一层.把二维数组看做是一维数组就可以了,按照上述理解类推. 下面是 一维 二维 三维数组例子 一维数组: int[] array1 ...
-
skip-grant-tables
1.net stop mysql 2.my.ini中[mysqld]plugin_dir的下面增加skip-grant-tables 3.net start mysql 4.在Navicat中打开my ...
-
elk 分布式部署
这个logstash 读取日志 是增量的 还是怎么读的? 定时每秒读增量 机器配置: elasticsearch-192.168.32.80 elasticsearch-192.168.32.81 e ...
-
centOS7 mini配置linux服务器(一)安装centOs7
1. 准备centos-7 (minni镜像) 官网地址http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Minim ...
-
POJ 3190 Stall Reservations贪心
POJ 3190 Stall Reservations贪心 Description Oh those picky N (1 <= N <= 50,000) cows! They are s ...
-
【deep learning学习笔记】注释yusugomori的DA代码 --- dA.h
DA就是“Denoising Autoencoders”的缩写.继续给yusugomori做注释,边注释边学习.看了一些DA的材料,基本上都在前面“转载”了.学习中间总有个疑问:DA和RBM到底啥区别 ...
-
Hadoop shell 一查就会
Hadoop shell 命令有三种格式 hdfs + dfs (必须是dfs) Hadoop + dfs Hadoop + df 命令 说明 hadoop 版本查看 hadoop version h ...
-
chakra在vs2017中编译出现的问题
转:http://blog.csdn.net/ink_cherry/article/details/73437981 1.无法找到vs2010生成工具 MSB8020 无法找到 Visual Stud ...