Next.js接口返回302重定向但浏览器未跳转该如何解决

问题原因 #

你通过Axios发起的是异步AJAX请求，这种场景下浏览器会自动跟随302重定向拉取目标地址的资源，但不会触发当前页面的全局跳转，这是AJAX的固有特性，和Next.js本身无关，就会出现你观察到的「根路径资源已经加载，但页面没有跳转」的现象。

可行解决方案 #

方案1：改用页面级跳转（最简便，无需修改接口）

直接让浏览器全局访问登出接口，而不是走AJAX请求，浏览器收到302响应后会自动完成页面跳转：

// 方式1：直接用a标签替代按钮
<a href="/api/logout">
  {t('user-authentication:logout')}
</a>

// 方式2：保留按钮结构，点击时修改全局location
function handleLogoutClick() {
  window.location.href = '/api/logout';
}

<button onClick={handleLogoutClick}>
  {t('user-authentication:logout')}
</button>

方案2：保留Axios请求，前端手动跳转

如果需要加登出loading、错误处理等逻辑，必须走异步请求的话，可以调整逻辑让前端控制跳转：

1. 先修改服务端登出接口，把重定向逻辑改为返回成功状态：

// ... 原有逻辑不变
request.session.destroy();
// 注释掉原有重定向逻辑
// return response.redirect(302, '/').end();
return response.status(200).json({ success: true });

2. 前端收到请求成功响应后手动跳转：

import { useRouter } from 'next/router';

// 组件内部逻辑
const router = useRouter();
const logoutRoute = '/api/logout';
const logoutRequest = () => axios.get(logoutRoute);

async function handleLogoutClick() {
  try {
    await logoutRequest();
    // 请求成功后手动跳转到首页
    await router.replace('/');
    // 不使用Next路由也可以直接写 window.location.href = '/'
  } catch (err) {
    console.error('登出失败', err);
  }
}

<button onClick={handleLogoutClick}>
  {t('user-authentication:logout')}
</button>

内容的提问来源于stack exchange，提问作者J. Hesters