React Fetch请求Express API时res.redirect无效，求鉴权重定向解决方案

你遇到的核心问题是：AJAX/Fetch 请求不会自动跟随服务端的 res.redirect 跳转。浏览器只会把重定向响应（3xx状态码）返回给Fetch的回调，而不会主动跳转页面——这是AJAX请求的设计逻辑，和普通的页面请求（比如直接输入URL）完全不同。

为什么服务端的 res.redirect 不生效？ #

当你用Fetch发送API请求时，浏览器认为这是一个异步数据请求，而非页面导航请求。所以即使服务端返回302重定向，浏览器也只会把这个响应的内容（包括重定向地址）交给你的Fetch代码，不会自动跳转到目标页面。

无需每个请求写判断的解决方案 #

虽然不能直接通过服务端的res.redirect让AJAX请求跳转，但我们可以用全局拦截+服务端返回特定状态码的方式，实现“一次配置，全局生效”的效果，不用每个请求都重复写判断逻辑。

步骤1：修改服务端代码，返回401未授权状态码 #

把原来的res.redirect改成返回401 Unauthorized状态码，同时可以附带提示信息：

app.get('/api/:blah', (req, res, next) => {
  if (loggedInOrAuthenticatedUser) { // 你的鉴权逻辑
    next();
  } else {
    // 返回401状态码，明确告诉客户端未授权
    res.status(401).json({ message: '请重新登录以访问该资源' });
  }
});

app.get('/api/someData', (req, res) => {
  res.json('someJsonData');
});

步骤2：客户端封装Fetch，全局拦截401状态 #

在React项目中，封装一个带全局拦截的Fetch工具函数，所有API请求都用这个函数发送，就能统一处理未授权的情况：

// src/utils/fetch.js
import { useNavigate } from 'react-router-dom'; // 如果你用React Router

// 封装带鉴权拦截的Fetch
export async function authFetch(url, options = {}) {
  const response = await fetch(url, {
    ...options,
    credentials: 'include', // 如果用Cookie鉴权，必须加这个，确保携带登录态
    headers: {
      'Content-Type': 'application/json',
      ...options.headers,
    },
  });

  // 全局拦截401状态
  if (response.status === 401) {
    // 跳转到重新登录页面
    // 如果用React Router，用navigate方法（需在组件内调用，或封装成hook）
    // navigate('/someReAuthPage');
    
    // 如果是普通场景，用window.location.href跳转
    window.location.href = '/someReAuthPage';
    
    // 抛出错误，中断后续逻辑
    throw new Error('未授权，已跳转至登录页');
  }

  return response;
}

步骤3：在组件中使用封装好的Fetch #

import { authFetch } from './utils/fetch';

// 组件内调用
async function fetchData() {
  try {
    const res = await authFetch('/api/someData', { method: 'GET' });
    const data = await res.json();
    // 处理数据
  } catch (err) {
    // 处理其他错误（401的情况已经被拦截跳转）
    console.error(err);
  }
}

有没有完全不用客户端判断的方法？ #

很遗憾，在SPA的API请求场景下没有。因为SPA的路由是由前端控制的，服务端只能处理数据请求，无法直接操纵前端的路由跳转。只有当请求是页面导航请求（比如用户直接输入URL、刷新页面）时，服务端的res.redirect才会生效——这种情况你可以在服务端的页面路由（比如React的getServerSideProps或者Express的页面路由）中用res.redirect，但API请求不行。

总结一下，服务端返回401+客户端全局拦截是SPA中处理未授权请求的标准方案，既不用每个请求写重复逻辑，也符合AJAX请求的设计规范。

内容的提问来源于stack exchange，提问作者김기현