前端用Fetch API提交请求后，Express后端如何实现重定向？

这是Fetch API的默认行为导致的，它不会自动触发浏览器的页面跳转，原因和解决方案如下：

核心原因 #

1. Fetch自动跟随重定向：Fetch API默认的redirect选项是follow，当后端返回302重定向响应时，Fetch会自动发起新的请求到目标地址（也就是/admin），最终返回给你的是/admin页面的响应，所以状态码是200而非302。redirected字段为true只是标记这个请求经历了重定向，但整个过程都在AJAX请求层面完成，和浏览器的页面导航无关。
2. AJAX请求不控制页面跳转：Fetch属于异步AJAX请求，它的设计目的是获取数据，而非触发浏览器的页面跳转。只有手动修改window.location.href，或使用传统HTML表单提交（非AJAX方式），浏览器才会自动处理重定向并跳转页面。

解决方案 #

你有几种选择来实现页面跳转：

1. 前端手动处理跳转（最常用） #

在Fetch的响应回调中，判断redirected为true时，手动设置window.location.href：

fetch('/login', {
  method: 'POST',
  body: new FormData(document.getElementById('login-form'))
})
.then(response => {
  if (response.redirected) {
    // 跳转到重定向后的地址，也可以直接写死"/admin"
    window.location.href = response.url;
  } else {
    // 处理登录失败逻辑，比如提示错误信息
    return response.json().then(data => alert(data.error));
  }
})
.catch(err => console.error('登录请求出错:', err));

2. 改用传统表单提交 #

如果不需要Fetch的异步能力，可以直接用HTML表单提交：

<form id="login-form" method="POST" action="/login">
  <!-- 用户名、密码输入框 -->
  <button type="submit">登录</button>
</form>

这种方式下，后端返回302时浏览器会自动跳转到/admin，不需要任何前端JS处理。

3. 后端返回JSON指令（前后端分离场景更友好） #

后端不返回重定向，而是返回包含跳转地址的JSON响应：

// Express后端代码
app.post('/login', (req, res) => {
  if (验证通过) {
    res.json({ success: true, redirectUrl: '/admin' });
  } else {
    res.json({ success: false, error: '用户名或密码错误' });
  }
});

前端拿到响应后再跳转：

fetch('/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'xxx', password: 'xxx' })
})
.then(res => res.json())
.then(data => {
  if (data.success) {
    window.location.href = data.redirectUrl;
  } else {
    alert(data.error);
  }
});

额外：如何获取原始的302状态码 #

如果想看到后端返回的302状态码，可以把Fetch的redirect选项设为manual，这样Fetch不会自动跟随重定向，你可以自己处理：

fetch('/login', {
  method: 'POST',
  body: formData,
  redirect: 'manual'
})
.then(response => {
  if (response.status === 302) {
    const redirectUrl = response.headers.get('Location');
    window.location.href = redirectUrl;
  }
});

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD