如何使用 JavaScript Fetch API 处理登录后的重定向？

如何使用 JavaScript Fetch API 登录后将用户重定向到另一个页面？

当使用 fetch() 函数向响应的服务器执行 POST 请求时使用 RedirectResponse，客户端将自动遵循重定向。这是因为 fetch() 函数中默认设置了重定向模式。因此，用户不会被重定向到新的 URL，而是 fetch() 将在幕后遵循该重定向并从重定向 URL 返回响应。

要解决此问题，您可以检查是否响应是您发出的重定向请求的结果。如果是这样，您可以检索响应的 url 属性，该属性将返回在任何重定向之后**获得的最终 URL，并且使用 JavaScript 的 window.location.href，您可以将用户重定向到目标 URL（即重定向页面）。除了 window.location.href 之外，还可以使用 window.location.replace()。与设置 href 属性值的区别在于，使用 location.replace() 方法时，导航到给定 URL 后，当前页面不会保存在会话历史记录中，这意味着用户将无法使用返回的页面按钮导航到它。

示例代码：

<code class="javascript">document.getElementById("myForm").addEventListener("submit", function (e) {
  e.preventDefault(); // Cancel the default action
  var formElement = document.getElementById("myForm");
  var data = new FormData(formElement);
  fetch("http://my-server/login", {
    method: "POST",
    redirect: "follow", // Change it to "manual" if you want to handle redirects manually
    body: data,
  })
    .then((res) => {
      if (res.redirected) {
        window.location.href = res.url; // or, location.replace(res.url);
        return;
      } else {
        return res.text();
      }
    })
    .then((data) => {
      document.getElementById("response").innerHTML = data;
    })
    .catch((error) => {
      console.error(error);
    });
});</code>

注意：如果您使用跨源请求，您将需要在服务器端设置 Access-Control-Expose-Headers 响应标头以包含 Location 标头。这是因为默认情况下仅公开 CORS 安全列表响应标头。

以上是如何使用 JavaScript Fetch API 处理登录后的重定向？的详细内容。更多信息请关注PHP中文网其他相关文章！