XMLHttpRequest.withCredentials 有什么用?

跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)

也可以简单的理解为，当前请求为跨域类型时是否在请求中协带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);

虽然配置了拥有跨域访问权限，但是测试时的页面并不允许被当前域所调用，所以出现同源策略错误，下图所示为允许调用的示例：

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，效果都会相同，且会一直提供凭据信息(cookie、HTTP认证及客户端SSL证明等)

下图为同域下配置xhr.withCredentials = false的请求效果

如果想了解更多的XMLHttpRequest参数，请查阅XMLHttpRequest参数详解

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。