無法使用 React 客戶端發出 API 請求

Question

我試圖讓我的 React 應用程序引用 mongoDB 數據庫，但我遇到了一些嚴重的請求問題。

這是客戶端中的服務。

import axios from "axios";

export default
{
    getAll: async () => {
        axios.get("api/quizlist").then((res) => {
            return res;
        }).catch(err =>
            {
                console.log(err);
            });
    }
}

這是我要撥打的路線：

app.get("/api/quizlist", (req,res) => {
  console.log("Recieved Request");
  db.QuizData.find().then(data => {
    console.log("Passed Data");
    res.json(data);
  }).catch(err => {
    res.json(err);
  });
});

我收到的錯誤信息是

Error: Request failed with status code 504
    createError createError.js:16
    settle settle.js:17
    handleLoad xhr.js:61

我試圖在 API 中與此建立代理連接：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "nodemon server.js"
  }

這在客戶端：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "proxy": "http://localhost:5000"
  }

（API 連接到端口 5000）

Answer 1

proxy不屬於package.json文件中的腳本 object 像這樣將其移出

"proxy": "http://localhost:5000"
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
}

（修改package.json文件后需要重啟應用）

您的前端請求中還缺少/

改變

import axios from "axios";

export default
    {
        getAll: async () => {
            
            // change
            axios.get("api/quizlist").then((res) => {

            // to
            axios.get("/api/quizlist").then((res) => {

            return res;
        }).catch(err =>
        {
            console.log(err);
        });
    }
}