个人中心
gpt4 book ai didi

不能显式拦截ajax请求的302响应？

转载 作者：我是一只小鸟 更新时间：2023-10-01 23:04:20 32 4
gpt4 key购买 nike

记录工作中早该加深印象的一个小case： ajax请求不能显式拦截 302响应.

我们先来看一个常规的登录case

  1. 浏览器请求资源，服务器发现该请求未携带相关凭据（cookie或者token）
  2. 服务器响应302，并在响应头Location写入重定向地址， 指示浏览器跳转到登录页
  3. 浏览器跳转到登录页，提交身份信息，回调到原业务站点，服务端利用Set-Cookie响应头种下cookie或者token

利用axios库发起请求 :

Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests. 。

When you make an HTTP request with axios, the library returns a promise. If the request is successful (i.e. the server responds with a 2xx status code), the promise will be resolved and the then() callback will be called with the response data. On the other hand, if the request fails (i.e. the server responds with a 4xx or 5xx status code), the promise will be rejected and the catch() callback will be called with the error. 。

  1. axios在浏览器发起的是ajax请求
  2. axios默认认为2xx状态码是成功的响应， 会进入promise的resolved回调函数， 本case第一次会收到302重定向响应， 故添加 ValidateStatus配置 。

伪代码如下:

                        
                             axios.request({
       method:'get',
       url:'/login',
       validateStatus: function (status) {
                return status >= 200 && status < 300 || status === 302; 
       },
   }).then((resp)=> {
     if resp.status ===302 {
         window.location.href = resp.headers['Location']
      }else{
        var userInfo = JSON.parse(
                    decodeURIComponent(
                        resp.data.msg || ""
                    ) || "{}"
                )
        this.setState({
              userInfo
        })
     }
   })

实际上以上 ajax请求收到的302响应并不能被显式拦截，上面的resp实际是redirect之后的页面的响应体 .

核心在于：所有浏览器都遵循了 ajax标准 ： readystatus=2, All redirects (if any) have been followed and all headers of a response have been received. 。

翻译下来就是 ： ajax收到的响应如果有重定向，必然是重定向逻辑走完之后的响应.

对于这个常规的case， github 上给出的思路是： 针对不同类型的http请求，服务端给出不同的状态码.

                        
                            if  req.isXhr {
     c.JSON(http.StatusForbidden, gin.H{
          "code": 403,
          "msg":  redirectUrl}) 
  }else {
      c.Redirect(http.StatusFound, redirectUrl)
  }

如果是ajax请求，返回4xx json响应，让浏览器主动重定向.

                        
                           axios.defaults.headers.common['X-Requested-With']="XMLHttpRequest";
 axios.request({    
            method: 'get',
            url: '/login',
            validateStatus: function (status) {
                return status >= 200 && status < 300 || status === 403; 
            },
        }).then((resp)=> {
            if (resp.status===200  && resp.data.code === 200) {
               ......
            }else{
                window.location.href = resp.data.msg
            }
        })

最后此篇关于不能显式拦截ajax请求的302响应？的文章就讲到这里了,如果你想了解更多关于不能显式拦截ajax请求的302响应？的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

32 4 0
文章推荐： salesforce零基础学习（一百三十二）Flow新功能：CustomError
文章推荐： C#/.NET/.NETCore优秀项目和框架2023年9月简报
文章推荐： KMP字符串匹配算法
文章推荐： SpringBoot进阶教程(七十七)WebSocket
我是一只小鸟
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com