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(引)的更多相关文章

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

    http://docs.wex5.com/ajax-cross-domain/ 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容 ...

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

    1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去 ...

  3. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  4. jquery ajax跨域调用

    客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...

  5. 以短链服务为例,探讨免AppKey、免认证、Ajax跨域调用新浪微博API

    新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...

  6. AJAX跨域调用ASP.NET MVC或者WebAPI服务

    关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案 作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP. ...

  7. 支持ajax跨域调用的WCF搭建示例

    支持ajax 跨域调用的WCF搭建 1.新建一个"ASP.NET空Web应用程序"项目. 2.新建一个“WCF服务(支持ajax)”. 3.修改WCFAjaxService.svc ...

  8. AJAX跨域调用ASP.NET MVC的问题及解决方案

    AJAX跨域调用ASP.NET MVC的问题及解决方案 问题描述: 解决方法: 只需要在web.config中添加如下标为红色的内容即可: <system.webServer> <h ...

  9. 调用ajax 跨域调用接口

    //ajax 跨域请求数据 function ajaxType (){ $.ajax({ url: "http://127.0.0.1:9090/spring_mvc/HttpClient/ ...

随机推荐

  1. asp.net GridView控件的列属性

    BoundField 默认的数据绑定类型,通常用于显示普通文本 CheckBoxField 显示布尔类型的数据.绑定数据为TRUE时,复选框数据绑定列为选中状态:绑定数据为FALSE时,则显示未选中状 ...

  2. js浮点数计算问题 + 金额大写转换

    一 js浮点数计算问题解决方案: 1.使用 NumberObject.toFixed(num) 方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 2.较精度计算浮点数 ...

  3. 也说面试 - 一个努力的iOS Dev

    你们在金色的余晖中回家,而我却在银色的温柔中,匆匆潜行-----这是我的现状. 今年的招工形式不是很好,难找工作:也难招人.写这篇博客,是为了给各位在找工作的iOS dev 一些参考. 上篇:换坑(去 ...

  4. 在WINDOWS上安装oracle database 11

    1:在CD-ROM中插入oracle database 11G安装盘会自动运行程序,打开[欢迎使用]窗口 2:弹出[选择安装类型] 3:弹出[制定主目录详细信息]‘oracle基目录’:用于设置环境变 ...

  5. 使用Resource Owner Password Credentials Grant授权发放Token

    对应的应用场景是:为自家的网站开发手机 App(非第三方 App),只需用户在 App 上登录,无需用户对 App 所能访问的数据进行授权. 客户端获取Token: public string Get ...

  6. Xshell连接Linux下Oracle无法回退的解决办法

    使用Xshell 连接远程Linux 数据库服务器,当切换到sqlplus 控制台时,输入错误字符的时候,使用回退键修改时,显示^H. 解决方法: 在控制太命令中输入stty erase ^H 回车就 ...

  7. C#中不同的线程对控件的更改

    .net 不允许跨线程个性其它线程创建的控件. 要想实现这个功能就需要用 InvokeRequired 检查是不是由该线程创建的控件,如果是直接操作,如果不是则 用Invoke 添加一个委托再加上参数 ...

  8. poi管道流的导入导出

    /** * 导入学生信息 * * @param classid * @param uploadFilePath * @return */ public boolean uploadStudentFil ...

  9. Java 基本数据类型长度

    System.out.println(Integer.MAX_VALUE-(-Integer.MAX_VALUE)); //内存溢出System.out.println(Integer.MAX_VAL ...

  10. Qt 无法解析外部文件2001,2019之类的

    一般是部分代码出错,比如构造函数的实参没有对应或者设置好: 还有尝试删除debug生成的文件试试,清理当前项目->重新构建: 以及看下有没有变量没有初始化或者变量定义的时候父类错了等. 以及其他 ...