Next-Auth生产环境出现TypeError: fetch failed问题求助

环境配置 #

NextJS: v13.0.3
NextAuth: v4.16.4
npm: v8.19.2
node: v18.12.1

错误触发场景 #

该错误仅在生产环境出现，开发环境完全正常。点击登录按钮进入登录页后触发错误，登录后既不显示登录状态，也不跳转到仪表盘页面。切换到开发环境则能正常显示登录状态。浏览器无任何错误，仅出现服务端错误。另外，直接访问http://localhost:3000/api/auth/session能正确返回登录信息。

错误信息 #

[next-auth][error][CLIENT_FETCH_ERROR] 
fetch failed {
  error: {
    message: 'fetch failed',
    stack: 'TypeError: fetch failed\n' +
      '    at Object.fetch (node:internal/deps/undici/undici:11118:11)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
    name: 'TypeError'
  },
  url: 'http://localhost:3000/api/auth/session',
  message: 'fetch failed'
}

登录代码 #

{allProviders.map((provider, index) => {
  const { id, name, Icon } = provider
    return (
      <div key={index}>
        <button
          aria-label="sign in"
          className="inline-flex items-center w-max px-5 py-3 rounded-lg bg-slate-100 gap-4"
          onClick={(e) => {
            e.preventDefault()
            signIn(id, { callbackUrl: '/dashboard' })
          }}
        >
          <Icon size={24} />
          {name}
       </button>
     </div>
   )
})}

.env文件配置 #

NEXTAUTH_SECRET=******
NEXTAUTH_URL=http://localhost:3000

[...nextauth].js文件配置 #

providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID as string,
      clientSecret: process.env.GOOGLE_SECRET as string,
    }),
  ],
  pages: {
    signIn: '/auth/signin',
  },
  secret: process.env.NEXTAUTH_SECRET as string,
  callbacks: {
    async jwt({ token, account }: any) {
      if (account?.access_token) {
        token.access_token = account.access_token
      }
      return token
    },
    async session({ session, token }: any) {
      if (session?.user) {
        session.user.id = token.sub
      }
      return session
    },
  },

已尝试但无效的方法 #

• 为环境变量添加NEXT_PUBLIC前缀
• 删除auth文件夹，仅保留signin.tsx
• 在signIn()执行前添加e.preventDefault()
• 移除[..nextauth].ts中的所有callbacks

解决建议 #

1. 修正生产环境NEXTAUTH_URL配置
   生产环境中NEXTAUTH_URL不能设为http://localhost:3000，必须使用实际部署的域名（如https://your-production-domain.com）。NextAuth在生产环境会通过该URL内部调用session接口，localhost在生产服务器/容器内无法访问，直接导致fetch失败。

2. 配置NEXTAUTH_URL_INTERNAL环境变量
   如果生产环境内部服务地址和外部访问地址不一致（比如容器化部署），设置NEXTAUTH_URL_INTERNAL为内部可访问的服务地址（如容器内的http://localhost:3000），让NextAuth内部调用时使用该地址，避免外部域名解析问题。

3. 升级NextAuth版本
   v4.16.4存在部分生产环境下的undici兼容问题，升级到最新稳定版（如v4.24.x）可修复已知的fetch错误。

4. 检查生产环境网络/端口映射
   若使用Docker等容器化部署，确保容器内部能正常访问应用服务端口，避免端口映射或网络隔离导致的内部请求失败。

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