| XMLHttpRequest请求携带cookie问题 | 您所在的位置：网站首页 › 原声ajax请求 › 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 ) }问题解决，而且解决办法并不复杂。由此问题引发思考，原生的基础真的很重要！ |
| CopyRight 2018-2019 实验室设备网 版权所有 |