前端 GET 請求收到 HTML 頁面如何實現跳轉？

AJAX 發 GET 請求，後端返回完整 HTML（或 302 重定向），但頁面不跳轉，因為 AJAX 不會自動導航瀏覽器。

原因

• XMLHttpRequest/fetch 只接收響應體，不處理 301/302 重定向導航（瀏覽器自動跟隨重定向並返回最終內容）。
• 若後端直接渲染 HTML 返回，data 只是字串，需手動處理。

解決方案

1. 後端返回 JSON 指令（推薦）：

   // 後端
   return ResponseEntity.ok().body("{\"redirect\": \"/dashboard\"}");
   
   // 前端
   fetch('/login', {method:'POST', body:formData})
     .then(r => r.json())
     .then(data => { if (data.redirect) location.href = data.redirect; });
   

2. 表單提交而非 AJAX：<form action="/login" method="post">，瀏覽器原生跳轉。
3. 後端設置 Header + 前端讀取：response.setHeader("X-Redirect", "/url")，前端 xhr.getResponseHeader('X-Redirect') 判斷跳轉。

核心原則：狀態改變（登錄、提交）用表單或返回跳轉 URL，查詢類操作用 AJAX。