curl返回状态码302（当后端给我返回了302状态码）

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注    
    
    
  、转载    
    
    
  。

前言

前段时间接手了一个项目   
    
    
    
，在代码中看到了这样的一段代码：

if ( isHTML(data) && response.request.responseURL?.indexOf(CAS_PREFIX) > -1 ) { window.location.href = response.request.responseURL; }

主要的作用就是当后端响应的内容是html的时候


     


     


     


  ，跳转到登录页面    


     


     


     
。这种方案让我感觉有点别扭 




 




 




 
，于是具体了解了这段代码出现的原因




 




 




 




。

功能的核心在于用户鉴权   

   

   

   

，后端设想的方案是：当前端发起接口请求

     

     

     

 ，后端识别到用户未登录的时候
  




  




  




  ，就会给前端响应302的状态码  


  


  


  


，以为很方面 
     
     
     
，前端不用处理就直接跳转到了登录页面   

   

   

 。

然而

   




   




   




   ，他们不知道的是 



 



 



 


，前端发起的ajax请求                 ，并不能直接跳转


    




    




    




   ，甚至连302状态码都捕获不到     

     

     

     。

常见状态码

HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成




  




  




  




。响应分为五类：信息响应(100–199)

















，成功响应(200–299)                  ，重定向(300–399)


     



     



     



   ，客户端错误(400–499)和服务器错误 (500–599)
  


  


  


。

200: 请求成功 301：永久重定向 302：临时重定向 303：硬糖少女 304：内容未改变 4：阿森纳 401：需要验证 403：拒绝访问 404：找不到 500：服务器异常

更多状态码：传送门

我们知道
















，浏览器对于不同的状态码   
    
    
    
，会有不同的行为     
     
     
     。那当返回302的时候


     


     


     


  ，浏览器会有什么样的反应呢？

浏览器处理302状态码

重定向 




 




 




 
，顾名思义   

   

   

   

，就是把请求重新指向了一个新的地址 




   




   




   



。

当浏览器发起一个请求

     

     

     

 ，服务端返回了302状态码
  




  




  




  ，这时候浏览器会根据响应头中的location字段  


  


  


  


，重新发起一个请求

 



 



 



。当重定向次数过多的时候 
     
     
     
，浏览器会抛出ERR_TOO_MANY_REDIRECT的异常                   。

请求分两种情况：

浏览器页面请求：跳转到新的页面  




    




    




    


。 ajax请求：返回最后重定向地址的响应

















。这种重定向

   




   




   




   ，会有可能出现跨域的问题                  。

前面提到的 



 



 



 


，服务端觉得返回302很方便                 ，大概是以为ajax也会跳转到新页面吧   



     



     



     

。

阻止ajax重定向

使用fetch Api进行请求的时候


    




    




    




   ，可以通过redirect参数配置如何处理重定向


















。

redirect可选的值有三个：

follow：自动重定向 error：如果产生重定向将自动终止并且抛出一个错误TypeError: Failed to fetch manual：手动处理重定向

在Chrome中默认使用follow（Chrome 47之前的默认值是manual）    
    
    
  。

当我们设置成manual时

















，如果发生了重定向                  ，会拿到type为opaqueredirect的response：

{ "body": null, "bodyUsed": false, "headers": {}, "ok": false, "redirected": false, "status": 0, "statusText": "", "type": "opaqueredirect", "url": "https://xxx.com", }

一般来说


     



     



     



   ，我们是不需要手动处理重定向的
















，因为你不知道这个重定向是否是就是因为未登录才产生的重定向    


     


     


     
。

如何处理未登录跳转的问题

当用户未登录时   
    
    
    
，我们除了302状态码之外


     


     


     


  ，可以选择使用401或403状态码 




 




 




 
，这样至少前端可以捕获到   

   

   

   

，并作出跳转的处理




 




 




 




。

在项目中

     

     

     

 ，我们和服务端的协议格式基本都是json
  




  




  




  ，响应的内容格式如下:

{ "code": 0, "data": null, "msg": "ok" }

一般来说  


  


  


  


，服务端都会响应200的http状态码 
     
     
     
，然后使用body里面的code字段标识业务异常   

   

   

 。所以当用户未登录时

   




   




   




   ，响应以下内容 



 



 



 


，也是不错的选择：

{ "code": 40401, "data": "https://login.xxx.com", "msg": "Unauthorized" }

如果的确要考虑自动跳转的场景                 ，可以在服务端区分一下请求是来源于页面请求还是ajax请求


    




    




    




   ，然后根据不同的请求响应不一样的内容即可     

     

     

     。比如以Express为例：

// The user needs to login again if (req.xhr) { res.status(200).json({ code: 40401, data: https://login.xxx.com, msg: "Unauthorized" }) } else { res.redirect(https://login.xxx.com) }

另外

















，我们还可以利用Accept请求头来区别响应




  




  




  




。

Accept 请求头用来告知（服务器）客户端可以处理的内容类型                  ，这种内容类型用MIME类型来表示
  


  


  


。借助内容协商机制, 服务器可以从诸多备选项中选择一项进行应用


     



     



     



   ，并使用 Content-Type 应答头通知客户端它的选择     
     
     
     。浏览器会基于请求的上下文来为这个请求头设置合适的值
















，比如获取一个CSS层叠样式表时值与获取图片    


     


     


     
、视频或脚本文件时的值是不同的 




   




   




   



。

常见的   
    
    
    
，直接在浏览器导航栏打开一个地址


     


     


     


  ，Accept的值大概会是Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9；ajax请求 




 




 




 
，会是：Accept: application/json, text/javascript, */*; q=0.01

 



 



 



。其中;q= (q因子权重)的值代表权重                   。

更多Accept介绍：传送门

后语

最后   

   

   

   

，点一下题  




    




    




    


。当后端给你返回了302

     

     

     

 ，在他们看来
  




  




  




  ，应该是这样的：

然而  


  


  


  


，在前端看来 
     
     
     
，却是这样的：

以上

   




   




   




   ，简单探讨了常见又不常处理的状态码302 



 



 



 


，如有错漏                 ，欢迎指正！

欢迎大家留言讨论


    




    




    




   ，祝工作顺利




 




 




 




、生活愉快！

我是bigo前端

















，下期见

















。