Next.js中使用NextAuth登出时出现CLIENT_FETCH_ERROR问题求助

问题描述 #

使用Next.js框架搭配Credentials登录方式，点击登出按钮后页面重载，控制台抛出[next-auth][error][CLIENT_FETCH_ERROR]，提示“获取资源时发生网络错误”，请求目标为/api/auth/csrf。直接访问该接口能正常获取令牌，但报错问题仍存在。

代码现状 #

侧边导航栏（SideNav）代码：

import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links';
import AppointItLogo from '@/app/ui/appointIt-logo';
import SignOutButton from '@/app/ui/dashboard/signout-button';

export default async function SideNav() {
  return (
    <div className="flex h-full flex-col px-3 py-4 md:px-2">
      <Link
        className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40"
        href="/home"
      >
        <div className="w-40 text-white md:w-40">
          <AppointItLogo />
        </div>
      </Link>
      <div className="flex grow flex-row justify-between space-x-2 md:flex-col 
       md:space-x-0 md:space-y-2">
        <NavLinks />
        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
        <form>
          <SignOutButton />
        </form>
      </div>
    </div>
  );
}

登出按钮（SignOutButton）代码：

"use client";

import { signOut } from "next-auth/react";
import { PowerIcon } from '@heroicons/react/24/outline';

export default function SignOutButton() {
    return (
        <button onClick={() => signOut({
            redirect: true,
            callbackUrl: `${window.location.origin}/`
        })}
        className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md 
        bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 
        md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-6" />
            <div className="hidden md:block">Sign Out</div>
        </button>
    );
}

解决方案 #

1. 移除表单标签干扰 #

SideNav中用<form>包裹SignOutButton，点击按钮会触发表单默认提交行为，导致页面提前重载，直接中断NextAuth的/api/auth/csrf请求，引发网络错误。

修复方式：直接移除包裹按钮的<form>标签，改为直接渲染按钮：

// SideNav中替换原form部分
<SignOutButton />

2. 优化signOut参数配置 #

手动拼接window.location.origin易出现环境适配问题，改用相对路径作为callbackUrl更稳妥：

// 修改SignOutButton中的signOut调用
signOut({
  redirect: true,
  callbackUrl: '/'
})

3. 检查NextAuth会话策略配置 #

Credentials登录方式必须配置JWT会话策略，否则登出时会因会话状态异常导致请求失败。确保auth.ts（或[...nextauth].ts）中有如下配置：

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      // 你的Credentials登录逻辑
    })
  ],
  session: {
    strategy: "jwt" // 必填，Credentials默认不支持session持久化
  },
  // 其他配置项
}

4. 确认客户端组件执行正常 #

确保SignOutButton顶部的"use client"指令正确，组件仅在客户端环境渲染，避免SSR相关干扰。

验证步骤 #

1. 应用修复后重启开发服务器
2. 登录后点击登出按钮，检查控制台是否仍有错误
3. 确认页面正常跳转到首页，用户已成功登出

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