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 )
}

问题解决，而且解决办法并不复杂。由此问题引发思考，原生的基础真的很重要！