Next.js 13路由处理器重定向无法修改浏览器URL问题求助

你遇到的核心问题是：客户端通过异步请求（如fetch/axios）调用POST登出接口时，浏览器不会自动根据后端返回的重定向响应更新地址栏。

后端返回的301重定向只会让浏览器自动跟随请求获取/auth的内容，但这是脚本发起的AJAX请求，并非浏览器级别的页面导航操作，所以地址栏不会变化——你看到页面内容变更，应该是前端框架（Next.js）在拿到新内容后重新渲染了，但URL不会同步更新。

方案1：前端手动处理跳转（推荐） #

保持后端登出逻辑不变，前端在调用接口成功后，手动触发页面跳转：

// 前端登出按钮的点击逻辑
async function handleLogout() {
  await fetch('/api/logout', { method: 'POST' });
  window.location.href = '/auth'; // 手动跳转到登录页
}

方案2：改用GET请求（不推荐，但简单） #

如果业务允许，可以把登出接口改成GET方法，然后让用户通过<a>标签触发请求：

// route.ts 修改为GET方法
export async function GET(request: Request) {
  const requestUrl = new URL(request.url);
  const supabase = createRouteHandlerClient({ cookies });
  await supabase.auth.signOut();
  return NextResponse.redirect(`${requestUrl.origin}/auth`, { status: 302 });
}

前端用链接触发：

<a href="/api/logout">登出</a>

注意：REST规范中，GET请求不应该处理状态变更（如登出），这种方式不符合规范，仅作为临时方案。

方案3：后端返回JSON响应，前端根据响应跳转 #

后端不返回重定向，而是返回登出成功的标识，前端收到后再跳转：

// route.ts
export async function POST(request: Request) {
  const supabase = createRouteHandlerClient({ cookies });
  await supabase.auth.signOut();
  return NextResponse.json({ success: true }, { status: 200 });
}

前端逻辑：

async function handleLogout() {
  const res = await fetch('/api/logout', { method: 'POST' });
  const data = await res.json();
  if (data.success) {
    window.location.href = '/auth';
  }
}

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