Next.js中间件fetch请求报错：调用localhost:3333出现TypeError

问题描述 #

在Next.js应用的中间件中发起fetch请求时，调用localhost:3333接口抛出错误：[TypeError: fetch failed] { cause: [Error: AggregateError] }，但调用外部公共接口（如http://api.tvmaze.com/search/shows?q=postman）可正常工作。

该请求用于验证用户访问授权路由的身份状态：通过localhost:3333/auth/user接口返回结果判断用户是否登录，已授权则允许访问，否则重定向至登录页。

环境信息：

• 前端运行地址：localhost:3000
• 后端运行地址：localhost:3333

问题代码 #

// 无法正常工作
const responseA = await fetch(`${process.env.NEXT_PUBLIC_API_HOST!}/auth/user`)
  .then(res => res.json())
  .catch(error => console.log(error))

console.log(responseA)

// 可以正常工作
const responseB = await fetch("http://api.tvmaze.com/search/shows?q=postman")
  .then(res => res.json())
  .catch(error => console.log(error))

console.log(responseB)

解决方法 #

问题已解决：
实际原因是使用Docker部署时，发起请求的前端容器内部并没有在3333端口运行Web服务。将请求地址中的localhost替换为后端Web服务所在容器的名称后，请求即可正确路由，问题解决。

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