当使用 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中文网其他相关文章！
