Next.js调用Express.js后端报AxiosError无法获取数据的问题

核心错误分析 #

1. API地址指向错误：前端请求/api默认指向Next.js自身服务（通常是3000端口），而非运行在5000端口的Express后端。
2. Axios用法错误：Axios会自动解析JSON响应，无需额外调用response.json()，这会导致类型错误。
3. 跨域限制问题：浏览器同源策略阻止不同端口的请求，需在Express后端配置CORS。
4. 按钮事件绑定错误：直接写onClick={console.log("start")}会在组件渲染时立即执行，而非点击触发。

步骤1：修复Express后端的跨域问题 #

先安装cors依赖，然后启用跨域支持：

npm install cors

修改Express代码：

const express = require('express')
const cors = require('cors')
const app = express()

// 开发环境允许所有跨域请求，生产环境可配置特定域名
app.use(cors())

app.get("/api", (req, res) => {
    res.json({"data": ["data1", "data2", "data3"]})
})

app.listen(5000, () => { console.log("Server started on port 5000, hi") })

步骤2：修正Next.js中的Axios请求逻辑 #

2.1 修正请求地址与响应处理

将请求指向Express的5000端口，并去掉多余的response.json()调用：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function Product() {
  // 优化初始状态为null，更符合加载逻辑
  const [backendData, setBackendData] = useState(null)

  useEffect(() => {
    axios.get('http://localhost:5000/api')
      .then(response => {
        // Axios自动解析JSON，直接取response.data
        setBackendData(response.data)
      })
      .catch(error => {
        // 添加错误捕获，方便调试
        console.error('加载数据失败:', error)
      })
    console.log("ran")
  }, [])

  const test = () => {
    axios.get('http://localhost:5000/api')
      .then(response => {
        setBackendData(response.data)
      })
      .catch(error => {
        console.error('测试请求失败:', error)
      })
    console.log("test clicked")
  }

  // 修复按钮事件绑定，使用箭头函数确保点击时执行
  return (
      <div>
          <div>Talk to us, tell us about your day...</div>
          <div>Test</div>
          <button onClick={() => console.log("start")}>Start</button>
          <button onClick={() => console.log("stop")}>Stop</button>
          <button onClick={() => console.log("reset")}>Reset</button>
          
          {(backendData === null) ? (
            <p>Loading...</p>
          ) : (
            backendData.data.map((data, i) => (
              <p key={i}>{data}</p>
            ))
          )}
          
          <button onClick={test}>测试获取数据</button>
      </div>
  );
}

可选：Next.js代理配置（避免硬编码地址） #

如果不想在代码中硬写http://localhost:5000，可在Next.js根目录创建next.config.js配置代理：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:5000/api/:path*',
      },
    ]
  },
}

配置后，前端可继续使用axios.get('/api')，Next.js会自动将请求代理到5000端口，修改后需重启Next.js服务。

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