MERN栈存储用户数据至MongoDB失败，请求超时报错求助

我是MERN栈新手，尝试将包含"name"和"role"两个字符串属性的用户信息存储至MongoDB，但浏览器控制台报错：

"Failed to load resource: Request timeout"
"Unhandled Promise Rejection: AxiosError: timeout exceeded"

相关代码 #

server index.js #

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors"); 
app = express();

const bookModel = require("./models/book");
const userModel = require("./models/user"); 

app.use(express.json());
app.use(cors);  

// mongoose.connect('mongodb://mh_user:<credentials>').then(() => {console.log('test')});

mongoose.connect("mongodb://mh_user:<credentials>", {
    useNewUrlParser: true,
})

// usermodel
app.postUser("/insert", async (req, res) => {
    const userName = req.body.userName
    const role = req.body.role
    const user = new userModel({ username: userName, role: role })

    try {
        await userModel.save();
    } catch (err) {
        console.log(err);
    }
});

app.getUser("/read", async (req, res) => {
    userModel.find({}, (err, result) => {
        if(err) {
            res.send(err)
        } 
        res.send(result)
    })
});


// bookmodel
app.post("/insert", async (req, res) => {
    const bookName = req.body.bookName
    const ISBN = req.body.ISBN
    const book = new bookModel({ bookname: bookName, ISBN: ISBN })

    try {
        await bookModel.save();
    } catch (err) {
        console.log(err);
    }
});

app.get("/read", async (req, res) => {
    bookModel.find({}, (err, result) => {
        if(err) {
            res.send(err)
        } 
        res.send(result)
    })
});

app.listen(3001, () => {
    console.log("Server running on port 3001 ...");
})

client adduser.js #

import styles from './Home.module.css'
import React, { useState } from "react";
import Axios from "axios"

export default function AddUser() {
    const [userName, setUserName] = useState("");
    const [role, setRole] = useState("");

    const addToDatabase = () => {
        Axios.post("http://localhost:3001/insert", { userName: userName, role: role })
    }

    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <h1 className={styles.title}>
                    Fügen Sie einen <a>neuen Nutzer</a> hinzu
                </h1>
                <p className={styles.description}>
                    Create - Operation{' '}
                </p>
                <div className={styles.grid}>
                    <form className={styles.table}>
                        <label>
                            <input
                                onChange={(event) => {
                                    setUserName(event.target.value);
                                }}
                                type="name" placeholder='name'
                            />
                        </label>
                        <label>
                            <input
                                onChange={(event) => {
                                    setRole(event.target.value);
                                }}
                                type="role" placeholder='role'
                            />
                        </label>
                    </form>
                </div>
                <br></br>
                <button onClick={addToDatabase}>speichern</button>
                <br></br>
                <a href="http://localhost:3000/">
                    <button>Hauptmenü</button>
                </a>
            </main>
            <footer className={styles.footer}>
                <a>
                    Powered by{' '}- Gruppe 1
                </a>
            </footer>
        </div>
    );
}

server user.js #

const mongoose = require('mongoose'); 

const userSchema = new mongoose.Schema({
    name: {
        type: String, 
        required: true,
    }, 
    role: {
        type: String, 
        required: true,
    }
}); 

const user = mongoose.model('userData', userSchema)
module.exports = user

修复方案 #

1. 修正CORS中间件调用 #

Express的cors需要作为函数调用才能生效，将：

app.use(cors);

改为：

app.use(cors());

2. 修正路由方法与路径冲突 #

Express不存在app.postUser/app.getUser这类方法，需改用标准的app.post/app.get；同时为用户和书籍路由添加前缀避免路径冲突：

// 用户路由
app.post("/users/insert", async (req, res) => {
  // 逻辑代码
});
app.get("/users/read", async (req, res) => {
  // 逻辑代码
});

// 书籍路由
app.post("/books/insert", async (req, res) => {
  // 逻辑代码
});
app.get("/books/read", async (req, res) => {
  // 逻辑代码
});

3. 修正Mongoose数据保存逻辑 #

• 创建实例后需调用实例的save()方法，而非模型的save()
• 匹配Schema定义的字段名（Schema中是name，而非代码中的username）
• 必须给客户端返回响应，避免请求超时

修正后的用户插入路由：

app.post("/users/insert", async (req, res) => {
  const userName = req.body.userName;
  const role = req.body.role;
  const user = new userModel({ name: userName, role: role });

  try {
    await user.save();
    res.status(201).json({ message: "用户创建成功", user });
  } catch (err) {
    console.log(err);
    res.status(500).json({ error: err.message });
  }
});

4. 处理Axios请求的Promise #

为Axios请求添加成功/失败回调，避免未处理的Promise拒绝：

const addToDatabase = () => {
  Axios.post("http://localhost:3001/users/insert", { userName: userName, role: role })
    .then(response => {
      console.log("保存成功", response.data);
      setUserName("");
      setRole("");
    })
    .catch(error => {
      console.error("保存失败", error);
    });
}

5. 完善MongoDB连接状态反馈 #

添加连接成功/失败的回调，便于排查数据库连接问题：

mongoose.connect("mongodb://mh_user:<credentials>", {
  useNewUrlParser: true,
})
.then(() => console.log("MongoDB连接成功"))
.catch(err => console.error("MongoDB连接失败", err));

内容的提问来源于stack exchange，提问作者Michael