无法使用 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 文件中的脚本对象，像这样将其移出

"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);
        });
    }
}