使用Fetch API时，服务端301重定向无法触发页面跳转的问题求助

问题根源 #

你遇到的情况是Fetch API的特性导致：当通过脚本发起Fetch异步请求时，浏览器只会处理请求的响应数据，不会主动触发页面跳转。哪怕服务端返回301/302重定向，Fetch会自动跟随请求获取到login.html的内容，但不会让当前页面导航到登录页——这和地址栏输入URL、点击链接这类浏览器原生导航行为完全不同。

最优解决方案 #

方案1：服务端返回状态码而非直接重定向

会话无效时，服务端返回401 Unauthorized状态码（语义更准确），同时可携带跳转标识：

// Express后端代码
if (!req.session.user) {
  return res.status(401).json({ redirectTo: "/login.html" });
}

方案2：前端封装统一Fetch工具（避免冗余代码）

既然不想每个请求都重复写校验逻辑，就把Fetch封装成全局工具函数，所有请求都通过它发起，统一处理401场景：

// 前端统一Fetch工具函数
async function fetchWithAuth(url, options = {}) {
  const response = await fetch(url, {
    credentials: "include", // 必须带上，否则会话Cookie不会随请求发送
    ...options
  });

  if (response.status === 401) {
    // 触发页面跳转
    window.location.href = "/login.html";
    // 抛出错误终止后续请求逻辑
    throw new Error("会话已过期，请重新登录");
  }

  return response;
}

之后所有业务请求都用这个工具函数替代原生Fetch：

// 示例：获取用户数据
async function getUserInfo() {
  try {
    const res = await fetchWithAuth("/api/user");
    const data = await res.json();
    // 处理业务数据
  } catch (err) {
    // 处理错误（比如会话过期的提示）
  }
}

为什么服务端直接重定向不生效？ #

对于AJAX类请求（包括Fetch），浏览器的重定向是请求层面的自动跟随，只会获取重定向后的资源内容，不会触发页面的导航跳转。你在网络面板看到login.html被下载，是Fetch请求自动跟随重定向后拿到的内容，但这个内容不会被渲染到当前页面，所以看起来页面没变化。

内容的提问来源于stack exchange，提问作者Pacmyc