XHR API -- withCredentials

XHR API – withCredentials

前言： 今天想讲讲这个 API，前几天封装的 XHR，在使用除了问题，发送 POST 请求无论如何都提示跨域了。（服务端响应头都设置好情况下）

官方文档：XMLHttpRequest.withCredentials - Web API 接口参考 | MDN (mozilla.org)

01 还原现场

下面代码是简单的 XHR 封装， 主要出问题的参数是 withCredentials = true

function request ({
    method: string
	url: string
	data?: string | object
	success?: (res: Object) => void
	fail?: (status: number) => void
}) {
    // 创建一个请求
    const request = new XMLHttpRequest ()

    // 设置请求方法、请求地址、是否异步
    request.open(method.toUpperCase(), url, true)

    // 设置请求头
    request.setRequestHeader("Content-Type", "application/json")

    // >--------问题出处--------<
    request.withCredentials = true
    // >-----------------------<

    // 发送请求
    request.send(JSON.stringify(data))

    // 接收响应
    request.onreadystatechange = () => {
        if (request.readyState !== 4) {
            return
        }

        // 判断响应状态
        if (request.status === 200) {
            // 请求成功
            const res = JSON.parse(request.responseText)
            success && success(res)
            resolve(res)
        } else {
            // 请求失败
            fail && fail(request.status)
            reject("请求失败,请检查网络!")
        }
    }
}


// >---发送一个 POST 请求---<
request({
    method:"POST",
    URL:"XXXXX",
    data:{
        name:"DuoR"
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

报错信息：

02 原因分析

withCredentials API 默认为 false 。简单来说，就是当发送跨域请求时，无论 Access-Control- Header 设置什么，都不无法为站点设置 Cookie 值，只有当设置为 true 才能设置。

上面的报错解释，当 credentials mode 为 include 时，Access-Control-Allow-Origin 响应头不可以设置为 “*”，必须明确 url（可能是出于安全考虑）。 通过 XMLHttpRequest 的 withCredentials 可以设置。