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

news2024/11/27 16:30:59

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

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

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

利用axios库发起请求^[1]：

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配置^[2]。

伪代码如下：

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标准^[3]：readystatus=2, All redirects (if any) have been followed and all headers of a response have been received.

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

对于这个常规的case， github^[4]上给出的思路是：针对不同类型的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
            }
        })

引用链接

[1] 利用axios库发起请求: https://www.geeksforgeeks.org/which-http-response-status-codes-result-in-then-and-which-in-catch/
[2] ValidateStatus配置: https://axios-http.com/docs/handling_errors
[3] ajax标准: https://xhr.spec.whatwg.org/#states
[4] github: https://github.com/axios/axios/issues/932#issuecomment-307390761

全文原创，希望得到各位反馈，欢迎斧正交流，若有更多进展，会实时更新到[左下角阅读原文]。