當使用 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中文網其他相關文章！
