AJAX请求接口时如果有返回HTTP状态301/302或者Location(重定向)则无效

原创 野人  2022-01-15 20:57  阅读 81 次
电费/话费9折起

今天,又碰到一个知识盲区了,因为在我印象中,只要返回请求Header头部有带Location(重定向),浏览器必会进行跳转,比如下面的列子打开就自动跳转到我的博客。

demo:点我会自动跳转到野人博客哦

而实际上的情况是,如果该请求不是AJAX请求的话,确实是正常跳转,而如果是通过AJAX请求的话,则该请求无论怎么跳转都是无效的。

遇到这个问题的时候,第一次经过排查,是后端Location(重定向)的地址写错了,然后今天更新代码到测试服上的时候,领导发了消息说怎么都是加载状态,是没对接好吗?我好纳闷啊,我还特意跟另外一个组员检查了本地正常啊,咋到服务器上就gg了,然后就进行了第二次排查,也就是本文的话题,这下Location(重定向)后端也返回正常了,但是是否无法自动跳到后端设置的登录页。

一阵搜索引擎后,才知道,出现这个现象的原因是浏览器本身做了限制了,而且并没有很好的解决方案(比如可以拿到HTTP的状态码,做一些业务逻辑,呜呜呜),但是变相的解决是有的,就是在发送的请求的时候,指定好Location(重定向)的动作。

这里我以Fetch来发送请求为例,通过设置redirect的值,如下有:

manual:阻止,返回一个过滤后的Response(无法看到任何的状态码和响应体),切Response.type.type为opaqueredirect(就是根据这个值来判断是不是发生了重定向),在NetWork面板中还能看到该请求,但状态为cancel

follow:默认值,跟随自动跳转(在NetWork面板可以正常看到该请求的任何信息)

error:阻止并抛出异常(在NetWork面板看不到该请求)

捕获重定向的代码;

fetch('https://nghttp2.org/httpbin/redirect-to?url=http%3A%2F%2Fwww.yerenwz.com&status_code=301',{
    redirect:"manual"
}).then(res=>{
  if(res.type==='opaqueredirect'){
    console.log("发生了重定向了!!!")
  }
})

对了,现在大部分项目中,用来发送AJAX最多的都是axios,设置方法,基本一样,只不过捕获的话,一般都有封装统一的响应拦截中,做处理就好了。

本文地址:https://www.yerenwz.com/5577.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论