(面試) 跨域實現方法之CORS

### 一. CORS（Cross-Origin Resource Sharing,跨域源資源共享）

　　基本思想：使用自定義HTTP頭部讓瀏覽器與服務器進行溝通

　　　　發送請求時，需附加一個Origin頭部

　　　　　　eg： Origin: http://www.xxx.net

　　若是服務認爲這個請求能夠接受，就在Access-Control-Allow-Origin投不中回發相同的源信息

　　　　Access-Control-Allow-Origin: http://www.xxx.net

　　1) IE對CORS的實現

　　　　XDR（XDomainRequest），這個對象與XHR相似

　　　　　　1.1） 與XHR區別：

　　　　　　　　cookie不會隨請求發送，也不會隨響應返回

　　　　　　　　只能設置請求頭部信息中的Content-Type字段

　　　　　　　　不能訪問響應頭部信息

　　　　　　　　只支持GET和POST請求

　　　　該對象的建立與發送請求的方法與XHR類似，但open()方法只含兩個參數（請求類型，URL）

　　　　**全部的XDR請求都是異步執行的**

　　　　eg： var xdr = new XDomainRequest（）；

　　　　　　　xdr.onload = function(){

　　　　　　　　　alert(xdr.responseText);

　　　　　　　}

　　　　　　　xdr.open("get",http://www.xxx.com/page/*);

　　　　　　　xdr.send(null)

　　　　在接收到響應後，你只能訪問響應的原始文本；沒有辦法肯定響應的狀態代碼，只要成功就會觸發load事件，若是失敗觸發error事件

　　　　XDR提供了contentType屬性，用來表示發送數據的格式，定義在open及send方法之間

　　2.）其餘瀏覽器對CORS的實現

　　　　其餘瀏覽器經過XMLHttpRequest對象實現對CORS的原生支持

　　　　請求位於另一個域中的資源，使用標準 的XHR對象並在open中的URL中傳入絕對URL便可

　　　　　　eg： xhr.open("GET","http://www.somewhere.com/page/",true)

　　3.) 帶憑據的請求

　　　　默認狀況下，跨源請求不提供憑據（cookie、HTTP認證及客戶端SSL證實等）。經過將withCredentials屬性設置爲true，能夠指定某個請求應該發送憑據

　　　　　　

　　　　　　XMLHttpRequest.withCredentials 屬性是一個Boolean類型，它指示了是否該使用相似cookies,authorization headers(頭部受權)或者TLS客戶端證書這一類資格證書來建立一個跨站點訪問控制（cross-site Access-Control）請求。在同一個站點下使用withCredentials屬性是無效的。

　　　　　　此外，這個指示也會被用作響應中cookies 被忽視的標示。默認值是false。

　　　　　　若是在發送來自其餘域的XMLHttpRequest請求以前，未設置withCredentials 爲true，那麼就不能爲它本身的域設置cookie值。而經過設置withCredentials 爲true得到的第三方cookies，將會依舊享受同源策略，所以不能被經過document.cookie或者從頭部相應請求的腳本等訪問

　　4.） 跨瀏覽器的CORS

　　　　檢測XHR是否支持CORS的最簡單方法，就是檢查是否存在withCredentials屬性。再結合檢測XDomainRequest對象是否存在

　　　　eg：

　　　　　　function createCORSRequest(method,url){

　　　　　　　　var xhr = new XMLHttpRequest();

　　　　　　　　if("withCredentials" in xhr){

　　　　　　　　　　xhr.open(method,url,true)

　　　　　　　　}else if(typeof XDomainRequest != "undefined"){ // IE

　　　　　　　　　　xhr = new XDomainRequest

　　　　　　　　}else{

　　　　　　　　　　xhr = null

　　　　　　　　}

　　　　　　　　return xhr;　　　　　　　　　

　　　　　　}

　　　　var request = createCORSRequset("get","http://somewhere-else.com/page/")

　　　　if(request){

　　　　　　request.onload = function(){

　　　　　　　　alert(request.responseText)

　　　　　　}

　　　　　　request.send()

　　　　}