Fetch API 默认不会将服务端 response.redirect() 触发的跳转反映到浏览器地址栏；需在前端手动解析重定向响应并调用 window.location.href 完成跳转。
fetch api 默认不会将服务端 `response.redirect()` 触发的跳转反映到浏览器地址栏；需在前端手动解析重定向响应并调用 `window.location.href` 完成跳转。
在使用 Express（配合 routing-controllers 等框架）构建登录接口时，开发者常期望后端调用 response.redirect("/admin") 后，前端页面能自动跳转至目标路径。然而，当使用 fetch 发起请求时，这一行为并不会如预期发生——即使服务端返回了 302 状态码并设置了 Location 头，fetch 在默认配置下会自动跟随重定向（follow redirect），并将最终响应（如 /admin 页面的 HTML 或 200 响应）返回给 JavaScript，而不会改变当前浏览器 URL，也不会触发页面级导航。
这是因为 fetch 的设计原则是：它是一个底层资源获取工具，而非导航控制机制。其 redirect: 'follow'（默认值）仅表示“自动请求重定向目标并返回最终结果”，而非“通知浏览器跳转”。因此，你看到的 res.status === 200、res.redirected === true 正是该行为的体现：请求确实被重定向了，但结果被 fetch 封装后交由 JS 处理，而非交由浏览器执行导航。
要实现真正的页面跳转，需在前端显式干预。推荐做法如下：
✅ 服务端保持简洁逻辑（无需修改）：
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
@Post("/api/sign_in")
protected async signIn(@Res() res: Express.Response): Promise<void> {
// 验证凭据、设置 session 等
if (valid) {
res.redirect("/admin"); // ✅ 正确：告知客户端应跳转至此
} else {
res.status(401).json({ error: "Invalid credentials" });
}
}✅ 前端主动识别并执行跳转：
async function signIn(email: string, password: string) {
try {
const response = await fetch("/api/sign_in", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
// 注意：不要设 redirect: 'manual'（否则需手动读取 Location 头）
// 默认 redirect: 'follow' 即可，便于检测 redirected 字段
});
// 关键判断：若服务端发起过重定向，则跳转到目标 URL
if (response.redirected) {
window.location.href = response.url; // ✅ 使用最终重定向地址（如 /admin）
return; // 提前退出，避免后续逻辑执行
}
// 否则处理常规 JSON 响应（如登录失败、API 错误等）
const data = await response.json();
if (!response.ok) throw new Error(data.message || "Login failed");
} catch (err) {
console.error("Sign-in error:", err);
}
}⚠️ 注意事项：
- 不要依赖
response.status === 302判断重定向，因为fetch自动跟随后，status是最终响应的状态（通常是 200）； -
response.url在重定向后会更新为最终 URL（如https://example.com/admin），可直接用于window.location.href； - 若需更精细控制（如根据角色跳转不同页面），可在服务端重定向前设置响应头（如
X-Redirect-To: /dashboard），前端读取该 header 替代response.url； - 使用
window.location.replace()可避免用户点击返回按钮回到登录页（替代href实现无历史记录跳转）。
总结：response.redirect() 在 Express 中语义正确且必要，但它只是 HTTP 层指令；fetch 不会将其映射为浏览器导航。真正的页面跳转必须由前端显式触发——这是现代 Web API 设计中“控制权分离”的体现，也是构建健壮前后端协作流程的关键认知。
