无法通过React客户端发出API请求

问题描述

我正在尝试使我的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","proxy": "http://localhost:5000"
  }

（API正在连接到端口5000）

解决方法

proxy不属于package.json文件中的scripts对象，将其像这样移出

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