Next.js中next dev与next build+next start的区别及fetch连接失败问题

问题描述 #

我已查阅Next.js官方文档了解基础内容，但遇到一个问题：在next dev环境加载页面时，以下fetch代码可正常运行，但在next build + next start环境下加载页面时，抛出连接拒绝错误。

错误信息 #

TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11118:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:3000
  at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)
  at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

Fetch代码 #

const getUser = async () => {
  const res = await fetch(`${process.env.AUTH0_BASE_URL}/api/auth/me`, {
    headers: {
      cookie: cookies().getAll().map(c => `${c.name}=${c.value}`).join(';') // 所有cookie
    }
  })
  return await res.json()
}

补充说明 #

• next start服务器启动在0.0.0.0:3000，访问地址为http://localhost:3000
• 浏览器DevTools显示getUser的fetch请求返回200 OK，但服务器端却报错，这与预期不符（该fetch应仅在服务器端执行）

问题原因 #

生产环境中，服务器端的fetch请求尝试连接::1:3000（IPv6本地回环地址），但你的服务器绑定的是0.0.0.0:3000，存在IPv6解析不兼容问题；另外，通过外部URL调用自身API属于冗余网络请求，没必要绕这一层。

解决办法 #

1. 直接调用API路由处理函数（最优方案） #

跳过fetch，直接导入API路由的逻辑代码执行。假设你的/api/auth/me对应文件是app/api/auth/me/route.js，可以这么做：

// 导入API路由的GET处理函数
import { GET as getAuthMe } from '@/app/api/auth/me/route'

const getUser = async () => {
  // 构造Request对象，传入必要的cookie头
  const req = new Request('http://localhost/api/auth/me', {
    headers: {
      cookie: cookies().getAll().map(c => `${c.name}=${c.value}`).join(';')
    }
  })
  // 直接调用处理函数
  const res = await getAuthMe(req)
  return await res.json()
}

2. 修正环境变量与服务器监听配置 #

• 确保AUTH0_BASE_URL在生产环境中设置为http://localhost:3000或服务器可访问的实际地址
• 启动服务器时强制使用IPv4，避免IPv6连接问题：

  HOST=127.0.0.1 next start
  

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