当前位置: 首页 > Web前端 > HTML

fetch如何处理302?

时间:2023-03-28 00:18:52 HTML

问题描述fetch发送请求,请求登录过期返回302,浏览器自动重定向到ResponseHeaders的Location登录页面。Location对应的服务器不接受跨域请求,所以页面报错。尝试在fetch的回调函数中处理,一旦fetch的响应状态为302就跳转到Location页面,但是无论你在fetch的回调函数中做什么,都无法执行。什么是HTTP状态代码302?HTTP302重定向状态码表示请求的资源已被临时移动到Location标头指定的URL。浏览器会重定向到这个URL,但搜索引擎不会更新指向该资源的链接。使用场景:在OAuth流程中,经常用到302;有时请求的资源不能从它的标准地址访问,但可以从另一个地方访问。在这种情况下可以使用临时重定向。搜索引擎不会记录这个新的临时链接。临时重定向也可用于在创建、更新或删除资源时显示临时进度页面。痛点:浏览器自动发起请求重定向地址,js无法介入。为什么无法获取拦截302?一般请求流程:fetch发送请求;服务器返回带有状态码(例如200)的响应;浏览器收到response,将结果提交fetch;从fetch的回调函数中获取相应的数据;302临时重定向请求的过程是:fetch发送请求;服务器返回带有302状态代码的响应(带有位置);浏览器收到响应,自动从302响应头信息的重定向地址中取位置跳转;对于重定向,当浏览器检查headers中有Location时,会直接跳转而不通知任何请求发送者(fetch),发送者会认为请求还在处理中。那么这个时候then和fetch的catch都抓不到信息了,如何解决呢?1、配置fetch的redirect选项,用于配置可用的重定向方式。redirect的取值有:follow:default,自动重定向;error:如果发生重定向,会自动终止并抛出错误;manual:手动处理重定向;如果发生重定向,error将自动终止并抛出错误。这个错误可以在fetchcatch回调函数中捕获:TypeError:Failedtofetch。fetch只在服务器出错时调用catch,其他的都会调用then函数,那为什么302调用catch呢?导致调用catch的不是302,而是导致调用catch的重定向请求的响应。manual手动处理重定向。该方法只能知道发生了重定向,但是响应的内容非常有限,无法获取到具体信息。2、后端重写状态码,前端手动处理当前的302作为404的重写。如果我们将404重写成自定义的状态码,那么前端抓取这个状态码,进行手动处理.这种方式需要前端和后端同学都去处理。301和302状态码的区别是301:永久重定向。一旦请求发送到一个URL,状态码返回301,浏览器会自动跳转到header中Location对应的URL。下次请求,再次向location对应的url发送请求。之后每次请求都会跳转到location对应的url。毫无例外。浏览器可以缓存来自这个url的响应。302:临时重定向。请求的资源是临时从不同的url获取的。一旦请求发送到一个URL,状态码返回302,浏览器会自动跳转到header中Location对应的URL。但是下次再请求时,向原来的url发送请求。每次请求都不能确定是否向Locationurl发送请求,所以需要先向原url发送请求进行确认。浏览器无法缓存来自重定向URL的响应。重定向可用于设置cookie。如果浏览器发现当前请求的response需要重定向,会直接忽略response的body,在开发者工具的网络面板上看不到body。虽然重定向请求的主体会被浏览器忽略,但是重定向请求的响应头仍然可以起作用。比如一个请求服务器同时返回302和set-cookie,那么浏览器可以在发起跳转前将cookie设置在当前页面的域下。即使你因为302重定向到另一个域,你仍然可以设置cookie。当用户访问域名a时,后端返回302,位置为域名b,同时set-cookie:cookieA浏览器在域名a下植入cookie:cookieA,然后发起请求到域名b.后端返回302,location为域名a,并设置-cookie:cookieB浏览器在域名b下植入cookie:cookieB,然后向域名a发起请求。这就相当于实现了这样一个效果:一个请求可以给不同的域名植入cookie(重定向由后端控制,前端透明,相当于只有一个请求的效果)。如果不需要重定向,可以考虑配置CORS发送跨域请求设置cookie,但是一旦CORS涉及到cookie等凭证信息,就会出现各种限制,在实践中很难达到有效的效果。其实跨域设置cookies也可以用浏览器的beaconAPI来实现。当然也有一些限制是可以多次跳转的,比如连续302,也就是该位置对应的url返回302和新的位置,以此类推,直到不再跳转位置。为了防止无限重定向,重定向的数量是有上限的。Chrome浏览器重定向次数为20次,超过20次会报ERR_TOO_MANY_REDIRECT错误。