跨域資源共享

CORS(Cross-Origin Resource Sharing, 跨域資源共享)是W3C的一個草案，定義了在必須跨域訪問資源時，瀏覽器與服務器如何溝通。其基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求是失敗還是成功。
發送POST或GET請求時，沒有自定義頭部信息，主題內容為text/plain，需要添加一個額外的Origin頭部，其中包含請求頁面的源信息（協議、域名和端口）。
Origin : http://www.nczonline.net
如果服務器可以接受這個請求，就在Access-Control-Allow-Origin頭部中回發相同的源信息，公共資源可以發回*
Access-Control-Allow-Origin : http://www.nczonline.net
請求和響應都不包含cookie信息

IE對CORS的實現

XDR類型：XDomainRequest
XDR與XHR的區別

• cookie不會隨請求發送，也不會隨響應返回
• 只能設置請求頭部信息中的Context-Type字段
• 不能訪問響應頭部信息
• 只支持GET和POST請求

//GET請求 var xdr = new XDomainRequest(); xdr.onload = function() {alert(xdr.responseText); } xdr.onerror = function() {alert("An error occured"); } xdr.timeout = 1000; xdr.ontimeout = function() {alert("Request took too long"); } xdr.open("get","http://example.com/page/"); //xdr.open("post","http://example.com/page/"); //xdr.contentType = "application/x-www-form-urlencoded"; xdr.send(null);

• XDR使用方法和XHR類似，先創建一個XDomianRequest對象，調用open方法，再調用send方法
• XDR的open方法只支持兩個參數，請求方式和URL
• XDR請求都是異步的，不能創建同步請求
• 請求返回后，觸發onload事件，響應的事件也會保存在responseText屬性中
• 響應如果失敗，就會觸發error事件，但是除了錯誤本身外，沒有任何其他信息
• 在請求返回前可以使用abort()方法終止請求
• 與XHR一樣，XDR也支持timeout屬性以及ontimeout事件處理程序
• 對于POST請求，提供了contentType屬性，用來表示發送數據的格式

其他瀏覽器對CORS的支持

FireFox 3.5+、Safari 4+、Chrome、iOS版Safari和Andriod平臺中的Webkit都通過XHR對象實現了對CORS的原生支持，使用標準XHR對象并在open方法中傳入絕對URL即可

var xhr = 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 unsuccessful : " + shr.status);}} } xhr.open("get","http://www.somewhere-else.com/page/", true); xhr.send(null);

Preflighted Requests

CORS通過一種叫做Preflighted Requests的透明服務器驗證機制支持開發人員使用自定義的頭部、GET或POST之外的方法，以及不同類型的主題內同，在使用下列高級選項來發送請求時，就會向服務器發送一個Preflight請求，這種請求使用OPTIONS方法，發送以下頭部

• Origin:與簡單的請求相同
• Access-Control-Request-Method:請求自身使用的方法
• Access-Control-Request-Headers:(可選)自定義的頭部信息，多個頭部以逗號隔開

Origin: http://www.nczonline.net
Access-Control-Request-Method:POST
Access-Control-Request-Headers:NCZ

發送請求后，服務器可以決定是否允許這種類型的請求，服務器通過在襄陽中發送如下頭部與瀏覽器進行溝通

• Access-Control-Allow-Origin:與簡單請求相同
• Access-Control-Allow-Method:允許的方法，多個方法用逗號隔開
• Access-Control-Allow-Headers:允許的頭部，多個頭部用逗號隔開
• Access-Control-Max-Age:應該將這個Prefilght請求緩存多長時間（以秒記）

Access-Control-Allow-Origin: http://www.nczonline.net
Access-Control-Allow-Method:POST, GET
Access-Control-Allow-Headers:NCZ
Access-Control-Max-Age:1728000

帶憑據的請求

默認情況下，跨域請求不提供憑據（cookie,HTTP認證及客戶端SSL證明等），通過將withCredentials屬性設置為true，可以指定某個請求應該發送憑據，如果服務器接受帶平局的請求，會用下面的HTTP頭部來響應
Access-Control-Allow-Credentials:true

跨瀏覽器的CORS

檢查XHR是否支持CORS最簡單的方法就是檢查是否存在withCredentials屬性，再結合檢測XDR是否存在，就可以兼顧所有瀏覽器了

function createCORSRequest(method,url){var xhr = new XMLHttpRequest();//檢查是否支持CORSif("withCredential" in xhr){xhr.open(method,url,true);} else if (typeof XDomainRequest != "undefined"){xhr = 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(); }

xhr與xdr的共同屬性/方法：

• abort()
• onerror()
• onload()
• responseText
• send()

轉載于:https://www.cnblogs.com/sombersong/p/6171276.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的跨域资源共享(1)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。