XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题

查看原文

XMLHttpRequest.withCredentials  属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。

此外，这个指示也会被用做响应中cookies 被忽视的标示。默认值是false。

如果在发送来自其他域的XMLHttpRequest请求之前，未设置withCredentials 为true，那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies，将会依旧享受同源策略，因此不能被通过document.cookie或者从头部相应请求的脚本等访问。

注: 永远不会影响到同源请求

Note: 不同域下的XmlHttpRequest 响应，不论其Access-Control- header 设置什么值，都无法为它自身站点设置cookie值，除非它在请求之前将withCredentials 设为true。

总结： XMLHttpRequest.withCredentials 可以是用来解决跨域请求时，由于浏览器安全 策略，不会自动携带cookie到服务器的问题。

Post请求实例：

var xmlhttp
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest()
} else {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
xmlhttp.open('POST', 'http://xxx/xxx/script', true)
xmlhttp.setRequestHeader('Content-type', 'application/json')
xmlhttp.withCredentials = true // 使外部脚本中的post请求头携带当前域的Cookies
// 注意：这里不能使用xmlhttp.setRequestHeader('Cookie', document.cookie),这样设置是不安全的做法
// xmlhttp.setRequestHeader('Cookie', document.cookie) // error
xmlhttp.send(JSON.stringify(postData))

Get请求实例：

var xmlhttp
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest()
} else {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
xhr.open('GET', 'http://example.com/', true)
xhr.withCredentials = true
xhr.send(null)

Ajax请求：

$.ajaxSetup({
    type: "POST",
    data: {},
    dataType: 'json',
    xhrFields: {
       withCredentials: true
    },
    crossDomain: true
})

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials