Fetch API - 重定向的用途：手册

Posted 2023-02-27

【中文标题】Fetch API - 重定向的用途：手册

【英文标题】：Fetch API - What's the use of redirect: manual

【发布时间】：2017-07-31 15:53:46

【问题描述】：

我最近一直在使用 javascript Fetch API。据我了解，默认情况下，所有重定向都是透明处理的，最后我会从重定向链中的最后一个调用中得到响应。

但是，我可以使用 redirect: 'manual' 调用 fetch，在这种情况下，它将返回不透明的重定向响应，但没有可用信息。来自https://fetch.spec.whatwg.org/#concept-filtered-response-opaque-redirect

一个不透明的重定向过滤响应 是过滤后的响应，类型为“opaqueredirect”，状态为0，状态消息为空字节序列，头部列表为空，正文为空，尾部为空。

https://fetch.spec.whatwg.org/#http-fetch 表示如果重定向设置为“手动”，则响应将变为 opaqueredirect：

开启请求的重定向模式： ... - 手册 将响应设置为内部响应为实际响应的不透明重定向过滤响应。

规范还说：

换句话说，一个不透明的过滤响应和一个不透明的重定向过滤响应与网络错误几乎没有区别。

考虑到这一切，为什么在使用 Fetch API 时一组重定向到手动？在我看来，这似乎毫无用处。是否存在有用的用例？

【问题讨论】：

只好自己用了。我正在请求一个有 3 个重定向的服务器，只是为了定义一些 cookie。 fetch 没有传递这些 cookie，所以我手动传递了它们。

我正在使用重定向：手动来缩短 URL

我在尝试使用 React Router 实现登录表单时遇到了 redirect 属性。成功登录后，我希望服务器返回 302，但我想使用客户端路由来处理它，而不是向服务器发出另一个请求。我认为 manual 值是我需要的，但由于 opaqueredirect 响应不包含 Location 标头（或任何其他标头，就此而言），我想我必须做一些其他的大大地。我不明白为什么要这样实现。

【参考方案1】：

我认为简短的回答是：除非您使用像 https://github.com/whatwg/fetch/issues/66 所涵盖的 service-worker 代码，否则您永远不需要 redirect: 'manual'。

更长的答案：

html spec seems to require 浏览器在浏览器开始导航到资源时首先将重定向模式设置为manual，然后……（重新）在未设置重定向模式的情况下进行操作？ （在这种情况下，它默认返回follow。）我不明白规范中的算法为什么会这样做，但我猜它一定与处理导航失败的情况有关。无论如何，我相信这是 manual 重定向模式在任何规范中的唯一用途。

无论如何，Fetch API 旨在公开浏览器在 fetch 中使用的所有相同原语，但这并不意味着这些原语在前端 JavaScript 代码中总是有很好的用途（与浏览器本身的使用相反）原语）。

所以我认为 Fetch 规范曾经要求，即使您可以使用 redirect: 'manual' 调用 API，如果您这样做，浏览器也会抛出异常 — 我猜是因为那时还没有人提供任何有效的为浏览器进行导航以外的任何情况设置它的原因。

但是由于https://github.com/whatwg/fetch/issues/66，这种行为发生了变化，这提供了一个（角落）案例，在服务工作者代码中需要redirect: 'manual'。

您可以在 Fetch API 中设置但在 Web 应用程序代码中几乎没有实用性的类似情况是 mode: 'no-cors'。最初添加它只是因为浏览器将它用于某些请求，因此 Fetch API 公开了它。但这是另一种情况，仅对 Service Worker 的实用性有限 - 用于缓存响应以便稍后按原样返回，而无需检查响应（mode: 'no-cors' 阻止 Web 应用代码执行此操作）。