快捷導(dǎo)航

Ajax跨域登錄請(qǐng)求未攜帶cookie錯(cuò)誤解決

更新時(shí)間：2023年10月31日 10:22:16 作者：DQuery

這篇文章主要為大家介紹了Ajax跨域登錄請(qǐng)求未攜帶cookie錯(cuò)誤解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

背景

重寫一個(gè)登錄頁(yè)面，登錄接口是跨域接口，重寫的頁(yè)面登錄成功后進(jìn)入頁(yè)面報(bào)錯(cuò)，原因是請(qǐng)求后臺(tái)接口未攜帶cookie，但是通過(guò)老頁(yè)面進(jìn)行登錄，進(jìn)入頁(yè)面后cookie可以正常攜帶，使用工具對(duì)比新老頁(yè)面登錄請(qǐng)求，request和response都是一樣。

解決

排除過(guò)以下可能性

在代碼中進(jìn)行cookie刪除
兩個(gè)請(qǐng)求頭不一樣導(dǎo)致結(jié)果不一樣
系統(tǒng)時(shí)間設(shè)置錯(cuò)誤，導(dǎo)致cookie過(guò)期

對(duì)比過(guò)兩邊的ajax請(qǐng)求代碼，確實(shí)都是一樣，甚至通過(guò)工具逐個(gè)字節(jié)進(jìn)行對(duì)比也是一樣，最后發(fā)現(xiàn)在老頁(yè)面一個(gè)隱藏的角落有一行這個(gè)代碼

$.ajaxSetup({
    dataType: "json",
    async: true,
    xhrFields: {
        withCredentials: true
    },
});

新頁(yè)面加上后問(wèn)題解決

其中核心的就是withCredentials: true這個(gè)配置，經(jīng)過(guò)查詢官方文檔，了解到如果跨域請(qǐng)求需要帶上cookie必須設(shè)置改參數(shù)，官網(wǎng)上是這么描述的

The XMLHttpRequest.withCredentials property is a boolean value that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has no effect on same-origin requests.

In addition, this flag is also used to indicate when cookies are to be ignored in the response. The default is false. XMLHttpRequest responses from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request. The third-party cookies obtained by setting withCredentials to true will still honor same-origin policy and hence can not be accessed by the requesting script through document.cookie or from response headers.

這里簡(jiǎn)單翻譯下

XMLHttpRequest.withCredentials是一個(gè)boolean類型的屬性，用于跨域請(qǐng)求時(shí)進(jìn)行認(rèn)證，比如cookie，認(rèn)證頭（authorization headers）或者TLS客戶端證書。當(dāng)請(qǐng)求是同域時(shí)該屬性失效。

另外，這個(gè)參數(shù)也表示是否可以忽略響應(yīng)cookie，默認(rèn)是false（也就是忽略cookie），如果沒(méi)有設(shè)置為true，XMLHttpRequest進(jìn)行的跨域請(qǐng)求響應(yīng)的cookie無(wú)法設(shè)置到該域下，設(shè)置withCredentials=true后，同域cookie策略仍然適用于第三方cookie，也就是無(wú)法通過(guò) document.cookie獲取響應(yīng)的cookie。

參考文檔