javascript - 无法使用 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）

标签： javascriptreactjsmongooseconnectionmern

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