跨域资源共享

2024年5月23日 199次阅读 来源: Evan_Chen

1.什么是跨域资本共享

CORS（Cross-Origin Resource Sharing,跨域资本共享）就是一个站点中的资本去接见别的一个不同源站点上的资本，其基本思想，就是运用自定义的HTTP头部让浏览器和服务器举行沟通，从而决议要求或相应是胜利照样失利。

2.为何要运用跨域资本共享

由于跨域安全策略限定，经由过程XHR完成ajax通讯，XHR对象只能接见与包括它的页面位于同一个域中的资本。而现实运用中，经由过程 <link> 标签加载外部样式表文件、经由过程 <img> 标签加载外部图片、经由过程 <script> 标签加载外部剧本文件等都须要运用跨域要求。

3.CORS的完成

IE对CORS的完成
要求跨域文件

var xdr = new XDomainRequest();
xdr.onload = function(){
    alert(xdr.responseText);
};
xdr.onerror=function(){
    alert("an error occurred");
};
xdr.open("get", "http://www.baidu.com/resource/");
xdr.send();

Origin:http://www.baidu.com/resource/  //自定义头部NCZ的运用POST要领发送的要求
Access-Control-Request-Method:POST
Access-Control-Request-Method:NCZ

服务器文件
<?php

header("Access-Control-Allow-Origin:http://www.baidu.com/resource/");//许可的相应的源
header("Access-Control-Allow-Method:POST,GET");//许可的要领
header("Access-Control-Allow-Header:NCZ");//许可的头部
header("Access-Control-Max-Age:86400");//要求缓存多长时间

firefox,safari,chrome对CORS的完成

var xhr=new createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readystate==4){
        if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
            alert(xhr.responseText);
        }
    }else{
        alert("request was failed:"+xhr.status);
    }
};
xhr.open("get", "http://www.baidu.com/resource/");
xdr.send();

4.其他跨域手艺

JSONP(JSON with Padding 添补式JSON 或参数式JSON)
SONP由两部分构成：回调函数和数据。回调函数是当相应到来时应该在页面中挪用的函数，而数据就是传入回调函数中的JSON数据。
比方：

<script type="text/javascript">
 function handleResponse(response){
 //处置惩罚取得的json数据
 }
</script>
<script src="http://example.com/data.php?callback=handleResponse"></script>//一个JSONP的要求

起首第一个script便签定义了一个处置惩罚数据的函数;
然后第二个script标签载入一个js文件，http://example.com/data.php 是数据地点地点，然则由于是当作js来引入的，所以http://example.com/data.php 返回的必需是一个能实行的js文件;
末了js文件载入胜利后会实行我们在url参数中指定的函数，而且会把我们须要的json数据作为参数传入。所以php应该是如许的

<?php
$callback = $_GET['callback'];//获得回调函数名
$data = array('1','2','3');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出

输出效果为：handleResponse([‘1′,’2′,’3’]);
jsonp是须要服务器端的页面举行相应的合营的。
图象ping
Comet
服务器发送事宜
Web Sockets
SSE与Web SSockets

    原文作者：Evan_Chen
    原文地址: https://segmentfault.com/a/1190000004564291
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞