由於 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")
  }