### 一. 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()
}