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

不能,拦截,ajax,请求,响应 · 浏览次数 : 16

小编点评

**小案例：ajax请求不能显式拦截302响应** **背景：** 我们先来看一个常规的登录case：浏览器请求资源，服务器发现该请求未携带相关凭据（cookie或者token）服务器响应302，并在响应头Location写入重定向地址，指示浏览器跳转到登录页浏览器跳转到登录页，提交身份信息，回调到原业务站点，服务端利用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 client (browser) side, when an HTTP request is made 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. **解决方案：** 在上面伪代码中，我们增加了 `validateStatus` 配置来显式拦截 302响应。`validateStatus` 函数接受响应状态码作为参数，并返回一个布尔值，指示请求是否应该继续执行。 `axios.request({...}).then((resp) => {...})` 响应成功时调用 `then()`回调，并将响应数据作为参数传递给 `res.data`。 `axios.request({...}).catch((err) => {...})` 响应失败时调用 `catch()` 错误回调，并将错误信息作为参数传递给 `err.response`。通过添加 `validateStatus` 配置，我们能够显式拦截 302响应，并将响应结果存储在 `resp.data` 中。如果响应状态码是 302，则将重定向后的页面的地址存储在 `window.location.href` 中。

正文

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

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

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

axios在浏览器发起的是ajax请求
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
            }
        })