Next.js无法获取Express后端对象：Fetch请求异常排查

可能的原因及解决方法： #

1. Next.js版本不兼容package.json的proxy配置

Next.js 13及以上版本（尤其是启用App Router时）已不再支持在package.json中配置proxy字段，需要改用next.config.js的rewrites规则实现代理：

创建或修改项目根目录的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:5000/api/:path*',
      },
    ]
  },
}

module.exports = nextConfig

修改后重启Next.js开发服务器，代理规则才会生效。

2. Fetch请求未添加错误捕获，无法定位问题

你的代码未处理请求失败场景，即使请求出错也不会在控制台显示信息，导致无法排查问题。给fetch添加错误处理：

useEffect(() => {
  fetch("/api")
    .then(response => {
      // 先检查响应状态是否正常
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      return response.json()
    })
    .then(data => {
      setBackendData(data)
    })
    .catch(err => {
      console.error('请求出错:', err);
    })
}, [])

打开浏览器控制台，查看是否有错误提示，可直接定位是代理问题、后端未启动还是跨域问题。

3. 初始状态设置不合理，导致渲染判断逻辑混乱

你初始化backendData为[{}]（数组包裹空对象），但后端返回的是对象{"data": [...]}，初始状态结构与返回数据不匹配，可能导致渲染逻辑出错。修改初始状态为null更合理：

const [backendData, setBackendData] = useState(null)

同时调整渲染判断逻辑：

{(backendData === null) ? (
  <p>Loading...</p>
) : (
  backendData.data.map((data, i) => (
    <p key={i}>{data}</p>
  ))
)}

4. 开发服务器启动顺序错误

必须先启动Express后端服务（确保http://localhost:5000/api能正常访问），再启动Next.js开发服务器。如果先启动Next.js，代理会找不到后端服务，导致请求失败。

5. 浏览器Network面板过滤设置问题

检查浏览器开发者工具的Network面板，确认没有勾选错误的过滤选项（比如只显示"Doc"而不是"XHR/fetch"），也没有通过URL关键字过滤掉/api请求，导致看不到请求记录。

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