HTTP状态码
Response中应该包含一个Location URL, 说明资源现在所处的位置,客户端会使用Location中给出的URL,重新发送新的HTTP request 。
浏览器在收到 301 响应之后,从 Location 里面获取到了新的地址,并发起了新的请求。但是,这个新的请求使用的是 GET 方法而非我们原来的 POST 方法,Request Body 也丢失了。
比如某个应用进行了整站重构,重构之后 URL 发生了改变,这时候可以考虑将老 URL 重定向到新 URL。
就好比胡同口有一家我们常去的饭店,但是由于旧城改造这家店搬迁到了另一个地方。有一天我们准备去这家店吃饭,发现门口张贴告示:此店已迁移到 XXX,并附上了详细的新地址。也就是说,之后如果我还想去这家店吃饭,只能去新的地址。
永久重定向
与301的区别就是浏览器不会改变请求的 HTTP Method 和 Request Body
应用场景举例 :
通常图片资源会放到类似 S3 这样的静态资源服务器,出于对隐私和安全的考虑,我们有时不能直接通过静态资源服务器的 URL 访问到这个图片,而是需要后端通过身份凭证去 S3 签发一个临时地址(这个地址用一次就失效了,下一次需要重新签发),然后我们才能通过这个临时地址访问到真正的图片资源。
对于这个场景,302/303 就非常有用了。比如,前端可以使用一个固定的 URL 来访问图片资源 (<img src="/image/foo.jpg"),这个 URL 由后端提供,后端在生成完临时地址之后,可以直接通过 302/303 重定向到这个新的地址,接下来浏览器会再次发起请求,获取新地址指向的这个图片资源。
临时重定向
与303的区别是浏览器不会改变请求的 HTTP Method 和 Request Body
重定向:返回3**状态码+location响应头;浏览器再次访问location提供的URL。
转发:当次Http请求,直接获取要转发的URL地址并返回。
一般来说文档加载/重新加载都会产生一个 Document 类型的请求
如果是通过 fetch/XMLHttpRequest 调用所获取到的 3XX 响应,浏览器是不会改变当前地址栏的 URL 并跳转的
应用场景 :
在使用 OAuth2 鉴权时(比如微信登录),可以通过 window.location 重定向到自己服务器的授权地址(支持多个平台登录时,可以由后端统一处理),然后服务器会生成一个三方授权点的地址,并通过 302 响应告知给浏览器,浏览器在收到响应之后会跳转到这个三方授权点的 URL(微信登录页),完成授权之后,三方授权页面会通过 window.location 再重定向回我们自己的页面。
通过 window.location 再配合 302 响应,我们可以快速将用户导向三方授权点,不需要加载任何 JS,非常快速方便。
2023-05-24 广告