@拭目以待:首發(fā)于ajax中的withCredentials使用效果
XMLHttpRequest.withCredentials 有什么用?
跨域請求是否提供憑據(jù)信息(cookie孤紧、HTTP認證及客戶端SSL證明等)
也可以簡單的理解為富岳,當前請求為跨域類型時是否在請求中協(xié)帶cookie旅赢。
XMLHttpRequest.withCredentials 怎么用?
withCredentials屬于XMLHttpRequest對象下的屬性,可以對其進行查看或配置势木。
查看withCredentials:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
xhr.onreadystatechange = function() {
console.log('withCredentials=>', xhr.withCredentials);
};
xhr.send(null);
配置withCredentials:
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
xhr.onreadystatechange = function() {
console.log('withCredentials=>', xhr.withCredentials);
};
xhr.send(null);
雖然配置了擁有跨域訪問權(quán)限,但是測試時的頁面并不允許被當前域所調(diào)用,所以出現(xiàn)同源策略錯誤媚送,下圖所示為允許調(diào)用的示例:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://172.19.0.215:1314/learnLinkManager/getLearnLinkList', true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
console.log('withCredentials=>', xhr.withCredentials);
};
xhr.send(null);
需要注意是兆蕉,當配置了xhr.withCredentials = true時羽戒,必須在后端增加 response 頭信息Access-Control-Allow-Origin,且必須指定域名虎韵,而不能指定為*易稠。當前示例所采用的node端配置代碼:
res.setHeader('Access-Control-Allow-Origin','http://172.19.0.215:3333');
如果在同域下配置xhr.withCredentials,無論配置true還是false劝术,效果都會相同缩多,且會一直提供憑據(jù)信息(cookie、HTTP認證及客戶端SSL證明等)
下圖為同域下配置xhr.withCredentials = false的請求效果
如果想了解更多的XMLHttpRequest參數(shù)养晋,請查閱XMLHttpRequest參數(shù)詳解
@拭目以待
個人站點:www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895):How To Make Love
微信公眾賬號:loveJavascript