如何在 Fetch API 调用后通过 Express 后端实现前端页面重定向-js教程-PHP中文网

如何在 Fetch API 调用后通过 Express 后端实现前端页面重定向

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 前端框架开发指南（IRIS版）

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" });
  }
}</void>

✅ 前端主动识别并执行跳转：

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 实现无历史记录跳转）。