无法使用 React 客户端发出 API 请求

Question

I'm trying to make my react app reference a mongoDB database, but I'm having some serious issues with the request.

Here's the Service in the client.

import axios from "axios";

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

Here's the Route I'm trying to call:

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

The error message I'm getting is

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

I've tried to set up a proxy connection with this in the API:

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

and this in the client:

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

(The API is connecting to port 5000)

Answer 1

The proxy doesn't belong in the scripts object in the package.json file move it out like this

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

(you need to restart your app after making changes in the package.json file)

You are also missing a / in your front end request

Change

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