Next.js 14 App Router API路由重定向失效问题排查

核心原因 #

用fetch发起AJAX请求时，后端返回的重定向响应只会被fetch API内部自动跟随，不会触发浏览器的页面跳转。从你给出的Response信息里redirected: true能看出来，fetch已经跟着重定向到了目标地址，但这只是AJAX请求层面的跳转，浏览器页面本身不会发生变化。

解决方法 #

有两种常用处理方式：

方式一：后端返回跳转地址，前端手动触发跳转 #

修改API路由处理器，不再返回重定向响应，而是返回包含跳转URL的JSON数据：

return NextResponse.json({
  redirectUrl: `${requestUrl.origin}/hidden/dashboard`
}, { status: 200 })

然后在前端useSignUp钩子的fetch请求成功后，手动执行跳转：

const response = await fetch('/api/auth/sign-up', {
  // 原有请求配置
})

if (response.ok) {
  const data = await response.json()
  // 用Next.js的router跳转（推荐）
  const router = useRouter()
  router.push(data.redirectUrl)
  // 或者用原生方式跳转
  // window.location.href = data.redirectUrl
  setIsLoading(false)
} else {
  // 原有错误提示逻辑
}

方式二：使用普通表单提交代替AJAX #

如果不需要在提交过程中做复杂的前端交互，可以直接用HTML表单的默认提交行为，不用fetch：

<form action="/api/auth/sign-up" method="POST">
  {/* 表单字段 */}
  <button type="submit">注册</button>
</form>

这种情况下后端返回的重定向会直接触发浏览器页面跳转。

补充说明 #

你当前看到的Response里的url是fetch跟随重定向后的最终请求地址，但这只是请求层面的结果，和浏览器当前页面的URL无关。只有当浏览器发起的是顶级导航请求（比如直接输入地址、点击链接、普通表单提交）时，后端的重定向才会改变页面URL。

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