js实现跨域的多种方法

域: 域是WIN2K网络系统的安全性边界。我们知道一个计算机网最基本的单元就是“域”,这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域。在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系。当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享
域树:域树由多个域组成,这些域共享同一表结构和配置,形成一个连续的名字空间。树中的域通过信任关系连接起来,活动目录包含一个或多个域树。域树中的域是通过双向可传递信任关系连接在一起。由于这些信任关系是双向的而且是可传递的,因此在域树或树林中新创建的域可以立即与域树或树林中每个其他的域建立信任关系。这些信任关系允许单一登录过程,在域树或树林中的所有域上对用户进行身份验证,但这不一定意味着经过身份验证的用户在域树的所有域中都拥有相同的权利和权限。因为域是安全界限,所以必须在每个域的基础上为用户指派相应的权利和权限。
域树中的域层次越深级别越低,一个“.”代表一个层次。
如域zhidao.baidu.com(百度知道)就比 baidu.com(百度)这个域级别低,因为它有两个层次关系,而baidu.com只有一个层次。

何为跨域

默认情况下,,XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。
只要协议、域名、端口有任何一个不同,都被当作是不同的域

比如在 页面向以下页面发送一个ajax请求,以下是其请求结果及说明

js实现跨域的多种方法

对于端口和协议的不同,只能通过后台来解决。我们要解决的是域名不同的问题

如何跨域

(一) CORS(Cross-Origin Resource Sharing,跨源资源共享)

1.CORS(Cross-Origin Resource Sharing,跨源资源共享)是W3C 的一个工作草案,定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS 背后的基本思想,就是使用自定义的HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
2.实现此功能非常简单,只需由服务器发送一个响应标头即可。

浏览器支持情况:

IE 8+

Firefox 3.5+

Opera 12+

Safari 4+

Chrome 3+

假设我们页面或者应用已在 上了,而我们打算从 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回错误。
利用 CORS, 只需添加一个标头,就可以允许来自 的请求。
下面是用php进行的设置,“*”号表示允许任何域向我们的服务端提交请求:

header{"Access-Control-Allow-Origin: *"}

CORS的兼容性写法

function createCORSRequest(method, url){ var xhr = new XMLHttpRequest(); //非IE浏览器 if ("withCredentials" in xhr){ xhr.open(method, url, true); //IE浏览器 } else if (typeof XDomainRequest != "undefined"){ vxhr = new XDomainRequest(); xhr.open(method, url); } else { xhr = null; } return xhr; } var request = createCORSRequest("get", "http://www.somewhere-else.com/page/"); if (request){ request.onload = function(){ //对request.responseText 进行处理 }; request.send(); }

(二) JSONP(JSON with Padding 填充式JSON 或参数式JSON)

在js中,我们虽然不能直接用XMLHttpRequest请求不同域上的数据时,但是在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的

JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。

例如:

<script type="text/javascript"> function dosomething(jsondata){ //处理获得的json数据 } </script> <script src="http://example.com/data.php?callback=dosomething"></script>

首先第一个script便签定义了一个处理数据的函数;
然后第二个script标签载入一个js文件, 是数据所在地址,但是因为是当做js来引入的,所以 返回的必须是一个能执行的js文件;
最后js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以php应该是这样的

<?php $callback = $_GET['callback'];//得到回调函数名 $data = array('a','b','c');//要返回的数据 echo $callback.'('.json_encode($data).')';//输出 ?>

最终,输出结果为:dosomething(['a','b','c']);
从上面可以看出jsonp是需要服务器端的页面进行相应的配合的。

JSONP的优缺点
优点:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwsyj.html