AJAX 登入跳轉失敗？後端重定向無效的解決方案

問題背景

在開發登入功能時，採用 AJAX 異步提交用戶名與密碼至後端驗證。驗證成功後，後端嘗試使用 return "redirect:/location/locatlon.do"; 進行頁面跳轉，但前端頁面卻毫無反應。開發者表示需要在登入後的頁面載入數據，單純在回調函數中跳轉會導致數據丟失，因此尋求更好的解決方案。

核心原因

AJAX 請求本質上是異步的 HTTP 請求，瀏覽器不會自動處理伺服器返回的 302 重定向響應。當後端返回重定向指令時，瀏覽器只是將重定向後的頁面內容作為 AJAX 的響應文本返回給回調函數，並不會更新地址欄或跳轉頁面。

解決方案

方案一：前端手動跳轉（推薦）

在 AJAX 成功回調中，使用 window.location.href 進行跳轉，並將所需參數拼接在 URL 後方：

$.ajax({
    url: '/login',
    type: 'POST',
    data: {username: 'user', password: 'pass'},
    success: function(response) {
        if (response.success) {
            // 攜帶必要參數跳轉
            window.location.href = "/location/locatlon.do?param1=value1¶m2=value2";
        }
    }
});

方案二：後端返回 JSON 指令

後端不直接重定向，而是返回包含跳轉 URL 的 JSON 對象：

// 後端代碼示例
return Json(new { success = true, redirectUrl = "/location/locatlon.do?param1=value1" });

前端解析後跳轉：

success: function(res) {
    if (res.success) {
        window.location.href = res.redirectUrl;
    }
}

注意事項

• 敏感數據勿通過 URL 參數傳遞，建議使用 Session 或 Token 機制。
• 若需保持數據，可考慮在跳轉前將數據存入 sessionStorage 或 localStorage，目標頁面讀取後清除。
• 確保後端驗證邏輯安全，防止繞過登入直接訪問受保護頁面。

總結

AJAX 請求無法直接響應伺服器端重定向，必須由前端根據後端響應結果主動執行跳轉。通過協議約定（返回 JSON 含跳轉地址）或前端拼接參數，可完美解決跳轉與數據傳遞並存的需求。