今天,又碰到一个知识盲区了,因为在我印象中,只要返回请求Header头部有带Location(重定向),浏览器必会进行跳转,比如下面的列子打开就自动跳转到我的博客。
而实际上的情况是,如果该请求不是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,设置方法,基本一样,只不过捕获的话,一般都有封装统一的响应拦截中,做处理就好了。