由于 Uncaught AxiosError - next.js 和 express.js，获取请求无法获取后端数据

Question

我正在尝试在我的 Express.js 后端获取一些后端数据，如下所示：

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

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

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

每次加载特定页面时，我希望它从后端获取{"data": ["data1", "data2", "data3"]} ，我添加了一个按钮，该按钮也发出相同的测试请求。 每当我单击按钮和页面加载时，我都会收到此错误：

我真的不明白为什么会出现此错误，这是我的 next.js 代码：

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


export default function Product() {

  const [backendData, setBackendData] = useState([{}])

  useEffect(() => {
    axios.get('/api').then(
      response => response.json()
    ).then(
      data => {
        setBackendData(data)
      }
    )
    console.log("ran")
  }, [])

  const test = () => {
    axios.get('/api').then(
      response => response.json()
    ).then(
      data => {
        setBackendData(data)
      }
    )
    console.log("test clicked")
  }


  return (
      <div style={styles.container}>
          <div style={styles.speechTitle}>Talk to us, tell us about your day...</div>
          <div style={styles.speechBox}>
            Test
          </div>
          <button onClick={console.log("start")}>
            Start
          </button>
          <button onClick={console.log("stop")}>Stop</button>
          <button onClick={console.log("reset")}>Reset</button>
          {(typeof backendData.data === 'undefined') ? (
            <p>Loading...</p>
          ) : (
            backendData.data.map((data, i) => (
              <p key={i}>{data}</p>
            ))
          )}
          <button onClick={() => test()}>asdasd</button>
      </div>

  );
}

我正在运行这个名为Product的组件，您在上面看到的这个名为product.js的文件位于我的 pages 文件夹中：

import React from 'react';
import { ThemeProvider } from 'theme-ui';
import { StickyProvider } from 'contexts/app/app.provider';
import theme from 'theme';
import SEO from 'components/seo';
import Layout from 'components/layout';
import Product from 'components/product-input'


export default function ProductPage() {
  return (
    <ThemeProvider theme={theme}>
        <StickyProvider>
          <Layout>
            <SEO title="Talkhappi" />
            <Product/>
          </Layout>
        </StickyProvider>
    </ThemeProvider>
  );
}

当我在开发人员工具中打开网络选项卡时，我也遇到了网络错误：

我不确定如何解决此问题并从运行在端口 5000 的后端检索我想要检索的数据。

Answer 1

您似乎必须在端口 5000 而不是您所做的 3000 调用您的 api。

  const baseURL = 'http://localhost:5000';

  const test = () => {
    axios.get(baseURL + '/api').then(
      response => response.json()
    ).then(
      data => {
        setBackendData(data)
      }
    )
    console.log("test clicked")
  }