XMLHttpRequest請求攜帶cookie問題

如今開發過程當中，大部分都是使用的框架，對於框架封裝好的東西使用起來着實很方便，可是也有一丟丟弊端，就是常常會忽略一些本質上的東西，近期開發中就遇到了一個基礎的問題。

說下開發背景，已經上線的VUE搭建的系統後臺，產品提出要給網站加一個首頁，純靜態頁展示一下平臺都有哪些功能，而後有一個登陸態和一個平臺入口。

因爲項目總體架構的問題，這個靜態頁至關因而單獨出來的東西，沒法使用框架內部封裝好的各類方法，因此登陸請求就是用了原生的XMLHttpRequest方法，簡單的寫個方法

function timedGetText( url, callback ){
    var request = new XMLHttpRequest();    
    request.open( "GET", url );
    request.responseType = 'json' 
    request.onreadystatechange = function(){ 
        if( request.readyState !== 4 ) return;        
        if( request.status === 200 ){
            callback( request.response );
        } 
    }
    request.send( null )
}複製代碼

發送請求獲取用戶信息，能取到用戶信息則展現到頁面，沒有登陸態則跳轉登陸頁

var loginIn = 'www.aa.com/login?ReturnUrl=' + window.location.href
timedGetText(getUrl, function(res){
    if(res.success){ 
        var users = res.data.name
        userName.innerHTML = users
    }else if(res.resultCode == '-100'){
        window.location.href = loginIn
        return false    
    }else{ 
        console.log(res.resultTips)    
    }
})複製代碼

代碼邏輯很簡單，頁面加載未登陸直接跳轉登陸頁，輸入帳號密碼後返回當前頁面，而後問題就出現了，返回頁面後無限跳登陸頁進入了死循環  😌😌😔

通過反覆檢查，代碼邏輯沒有問題，跳轉路徑也ok的，並無發現什麼問題。只能請教大佬，大佬看了看控制檯，最終發現問題，使用的是原生的XMLHttpRequest方法，在登陸成功後，登陸態沒有拿到，也就是請求的時候沒有攜帶相應的cookie，所以纔會循環發送登陸請求。

原生方法請求攜帶cookie方法也有不少，好比用一個隱藏圖片的src去請求，也能夠在XMLHttpRequest請求頭添加一個字段，此處才用第二種方法

function timedGetText( url, callback ){
    var request = new XMLHttpRequest();    
    request.open( "GET", url );
    request.withCredentials = true
    request.responseType = 'json' 
    request.onreadystatechange = function(){ 
        if( request.readyState !== 4 ) return;        
        if( request.status === 200 ){
            callback( request.response );
        } 
    }
    request.send( null )
}複製代碼

問題解決，並且解決辦法並不複雜。由此問題引起思考，原生的基礎真的很重要！