使用Fetch发送POST请求无法跳转页面，寻求后端跳转解决方案

Fetch属于异步AJAX请求，和普通表单提交的机制完全不同：普通表单提交会让浏览器直接处理整个页面的跳转逻辑，而Fetch只会在后台完成请求交互，不会自动触发浏览器的页面跳转。要实现后端引导跳转的需求，需要前后端配合处理：

后端处理（以Express框架为例） #

根据请求信息判断跳转目标，将跳转地址返回给前端：

app.post('/userProfile', (req, res) => {
  // 这里编写你的业务判断逻辑，比如验证用户提交的信息
  const isUserValid = /* 你的验证逻辑，比如检查用户身份是否合法 */ true;
  const redirectUrl = isUserValid ? '/user/dashboard' : '/user/login';

  // 返回包含跳转地址的JSON响应
  res.json({ redirectUrl });
});

你也可以选择返回3xx重定向状态码，但前端需要额外处理响应：

app.post('/userProfile', (req, res) => {
  const isUserValid = true;
  const redirectUrl = isUserValid ? '/user/dashboard' : '/user/login';
  
  // 返回重定向状态码和目标地址
  res.redirect(redirectUrl);
});

前端修改Fetch请求 #

在请求完成后，根据后端返回的信息手动触发页面跳转：

对应后端返回JSON响应的情况 #

fetch('/userProfile', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: json
})
.then(response => response.json())
.then(data => {
  // 手动跳转到后端指定的页面
  window.location.href = data.redirectUrl;
})
.catch(err => console.error('请求失败:', err));

对应后端返回3xx重定向的情况 #

fetch('/userProfile', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: json
})
.then(response => {
  // 检查响应是否触发了重定向
  if (response.redirected) {
    window.location.href = response.url;
  } else {
    // 处理未触发重定向的异常情况
    throw new Error('请求未触发预期的重定向');
  }
})
.catch(err => console.error('请求失败:', err));

核心逻辑总结：Fetch不会自动处理页面跳转，必须拿到后端返回的跳转地址后，通过window.location.href手动触发浏览器的页面跳转行为。

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