Next.js服务端路由重定向至源URL失效问题排查

核心问题：你通过客户端组件按钮发起的是AJAX/fetch请求，这类请求不会自动跟随服务端返回的重定向响应——哪怕服务器返回301/302状态码，浏览器只会接收响应结果，不会主动触发页面跳转。

解决步骤 #

1. 修改服务端路由，返回跳转指令给客户端

将原本的重定向逻辑改为返回JSON格式的跳转地址，交由客户端主动处理：

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export const dynamic = 'force-dynamic';

export async function POST(request: Request) {
  const requestUrl = new URL(request.url);
  const supabase = createRouteHandlerClient({ cookies });

  await supabase.auth.signOut();
  console.log("Salir sesion ruta llamada");
  console.log("Origin URL:", requestUrl.origin);

  // 返回跳转地址给客户端
  return NextResponse.json(
    { redirectTo: `${requestUrl.origin}/` },
    { status: 200 }
  );
}

2. 在Navbar客户端组件中手动处理跳转

修改登出按钮的点击事件，收到服务端响应后，通过window.location.href触发页面跳转：

// Navbar组件中的登出处理函数
const handleLogout = async () => {
  try {
    const response = await fetch('/api/logout', { method: 'POST' });
    const data = await response.json();
    if (data.redirectTo) {
      window.location.href = data.redirectTo;
    }
  } catch (err) {
    console.error('登出失败:', err);
  }
};

额外检查项 #

• 确认客户端调用的路由路径与服务端路由文件路径完全匹配（比如服务端路由是app/api/logout/route.ts，客户端需请求/api/logout）
• 可在客户端添加Supabase的auth状态监听，验证登出操作是否真正完成：

  import { useSupabaseClient } from '@supabase/auth-helpers-react';
  // ...
  const supabase = useSupabaseClient();
  useEffect(() => {
    const { data: listener } = supabase.auth.onAuthStateChange((event) => {
      if (event === 'SIGNED_OUT') {
        console.log('用户已登出');
      }
    });
    return () => listener?.unsubscribe();
  }, [supabase]);
  

• 避免使用301永久重定向，这类重定向会被浏览器缓存，后续请求可能直接走缓存；登录/登出场景更适合用302临时重定向（若后续需用服务端重定向，前提是客户端不能发起AJAX请求）

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