ajax 302 错误无法跳转

Love The Way You Lie 2023-08-17 15:58 125阅读 0赞

1.问题当cas登录失败之后如果继续执行**ajax请求会报 302** 重定向错误，但是因为是ajax请求，所以浏览器不会自动跳转，需要做处理。

1.自己重写ajax方法：不推荐

var Ajax = function() { 
        var that = this;
        // 创建异步请求对象方法
        that.createXHR = function() { 
            if (window.XMLHttpRequest) {  // IE7+、Firefox、Opera、Chrome 和Safari
                return new XMLHttpRequest();
            } else if (window.ActiveXObject) {  // IE6 及以下
                var versions = [ 'MSXML2.XMLHttp', 'Microsoft.XMLHTTP' ];
                for (var i = 0, len = versions.length; i < len; i++) { 
                    try { 
                        return new ActiveXObject(version[i]);
                        break;
                    } catch (e) { 
                        // 跳过
                    }
                }
            } else { 
                throw new Error('浏览器不支持XHR对象！');
            }
        }
        // 初始化数据方法
        that.init = function(obj) { 
            // 初始化数据
            var objAdapter = { 
                method : 'get',
                data : { },
                success : function() { 
                },
                complete : function() { 
                },
                error : function(s) { 
                    alert('status:' + s + 'error!');
                },
                async : true
            }
            // 通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
            that.url = obj.url + '?rand=' + Math.random();
            that.method = obj.method || objAdapter.method;
            that.data = that.params(obj.data) || that.params(objAdapter.data);
            that.async = obj.async || objAdapter.async;
            that.complete = obj.complete || objAdapter.complete;
            that.success = obj.success || objAdapter.success;
            that.error = obj.error || objAdapter.error;
        }
        // get方法
        that.get = function(obj) { 
            var xhr = that.createXHR(); // 创建XHR对象
            that.init(obj);
            if (that.async === true) {  // true表示异步，false表示同步
                // 使用异步调用的时候，需要触发readystatechange 事件
                xhr.onreadystatechange = function() { 
                    if (xhr.readyState == 4) {  // 判断对象的状态是否交互完成
                        that.callback(obj, this); // 回调
                    }
                };
            }
            // 若是GET请求，则将数据加到url后面
            that.url += that.url.indexOf('?') == -1 ? '?' + that.data : '&'
                + that.data;
            // 在使用XHR对象时，必须先调用open()方法，
            // 它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
            xhr.open(that.method, that.url, that.async);
            xhr.send(null); // get方式则填null
            if (that.async === false) {  // 同步
                that.callback(obj, this); // 回调
            }
        }
        // 请求成功后，回调方法
        that.callback = function(obj, xhr) { 
            console.log("ajax 请求http code值：" + xhr.status)
            if (xhr.status == 200) {  // 判断http的交互是否成功，200表示成功
                obj.success(xhr.responseText); // 回调传递参数
            } else { 
              // 如果请求有问题就跳转到首页去登录
                console.log('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
                top.location.href = "/home";
            }
        }
        // 数据转换
        that.params = function(data) { 
            var arr = [];
            for ( var i in data) { 
                // 特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
                arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
            }
            return arr.join('&');
        }
        return { 
            get : that.get,
        }
    }

这里项目里面本身都是使用的jquery的ajax请求，如果所有请求都走我自己定义一套ajax去处理302的话，那么改动量比较大，因此选择继续使用 jquery的ajax，那么如何处理这个错误的问题呢？

ajax给我们提供了一个**ajaxSetup**方法，可以对回调做预处理，我们只需要覆写这个方法就可以处理ajax的返回值的逻辑了，代码如下：

/** * 处理 ajax 302 错误问题 */
    $.ajaxSetup({ 
        //请求方式，默认为get
        type:'post',
        //请求成功后触发
        success: function () { 
            console.log('成功')
        },
        //请求失败遇到异常触发
        error: function () { 
            console.log('失败')
        },
        //完成请求后触发。即在success或error触发后触发
        complete: function (XMLHttpRequest,status) { 
            if(status === 'error'){ 
            	// 关键在这里，如果返回值为error那么久直接跳转到指定页面
            	// 这里使用top可以解决iframe嵌套之后，父页面不跳转的情况
                top.location.href = "/home";
            }
        },
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关 CTFHub | 302跳转

0x00 前言 CTFHub 专注网络安全、信息安全、白帽子技术的在线学习，实训平台。提供优质的赛事及学习服务，拥有完善的题目环境及配套 writeup ，降低 CTF

àì夳堔傛蜴生んèń/ 2024年04月06日 13:59/ 0 赞/ 81 阅读

相关 CTFHub技能树HTTP协议——302跳转

环境：[火狐浏览器][Link 1]、burp suite。 1.使用火狐浏览器，点击开启题目，打开给出的链接。点击“Give me Flag”发现还是返回这个页面，服务器返

小鱼儿/ 2024年03月26日 18:33/ 0 赞/ 75 阅读

相关 ajax 302 错误无法跳转

1.问题当cas登录失败之后如果继续执行ajax请求会报 302 重定向错误，但是因为是ajax请求，所以浏览器不会自动跳转，需要做处理。 1.自己重写ajax方法：不推荐

Love The Way You Lie/ 2023年08月17日 15:58/ 0 赞/ 126 阅读

相关 ajax302错误,Wordpress admin-ajax导致错误302重定向

我已经定制了一个插件来做一些Ajax调用admin-ajax.php并且它工作的很好。我复制的代码转移到另一个网站，它不再适用于未登录谁的用户Wordpress admin-a

以你之姓@/ 2022年09月03日 14:13/ 0 赞/ 191 阅读

相关转：HTTP 301 跳转和302跳转的区别

301和302 Http状态有啥区别？ 301， 302 都是 HTTP 状态的编码，都代表着某个URL发生了转移，不同之处在于： 301 redirect: 301

小灰灰/ 2022年08月19日 12:24/ 0 赞/ 232 阅读

相关 HTTP 302跳转

前言　　Http 302对应生活中的真实例子，可以类比手机所对应的呼叫转移功能，这样打进A手机的电话，均转移到B手机接听。正文　　302状态码应用的典型场景是服

╰半夏微凉°/ 2022年05月14日 11:43/ 0 赞/ 223 阅读

相关 PHP的301,302自动跳转代码

301重定向就是页面永久性移走的意思，搜索引擎知道这个页面是301重定向的话，就会把旧的地址替换成重定向之后的地址。 302重定向就是页面暂时性转移，搜索引擎处理302的话，

客官°小女子只卖身不卖艺/ 2022年04月22日 02:54/ 0 赞/ 264 阅读

相关 Ajax页面跳转

$.ajax({ type:"POST", url: //你的请求程序页面随便啦 // 非必需async:false,/

- 日理万妓/ 2022年03月21日 04:18/ 0 赞/ 290 阅读

相关 ajax 提交后无法跳转的问题

ajax 提交后不能进到success里面，不能跳转页面，之前以为是 window.location.href="/order.php"; $(window

「爱情、让人受尽委屈。」/ 2021年11月26日 14:40/ 0 赞/ 419 阅读

相关 302跳转和sendRedirect的区别

首先明确一下，重定向发生在客户端，所以在浏览器地址栏上可以看到变化（forword跳转发生在服务器端，浏览器不能观察到）。如果要进行重定向，可以使用下面两种方式： respo

川长思鸟来/ 2021年06月24日 14:34/ 0 赞/ 485 阅读