React+Node.js+MongoDB环境下Axios POST请求404报错排查求助

我尝试通过Axios向Mongoose数据库提交数据，但一直出现404错误，请求帮忙排查代码问题。

前端组件代码（AddForm.jsx） #

import React, { useState } from "react";
import axios from "axios";
// 注意：代码中使用了Form和Button组件，但未导入React Bootstrap相关模块，需补充导入
// import { Form, Button } from "react-bootstrap";

const AddForm = () =>{

    const [appData, setAppData] = useState({
        pName:"",
        appNum:"",
        datetime:"",
    })

const submit =(e) =>{
    e.preventDefault();
    axios.post("/addAppDetails", {
        pName: appData.pName, 
        appNum: appData.appNum, 
        datetime: appData.datetime, 
    })
    .then(res =>{
        console.log(res.appData)
    })
    .catch((error)=>{
        console.log(error);
      });
}


const handle = (e) => {
    const newData={...appData}
    newData[e.target.id] = e.target.value
    setAppData(newData)
    console.log(newData)
}

    return(
        <Form onSubmit={(e) => submit(e)}>
            <Form.Group>
                <Form.Control
                id="pName"
                type="text"
                placeholder="Patient Name"
                onChange={(e) => handle(e)}
                value={appData.pName}
                required/>
            </Form.Group>
            <Form.Group>
                <Form.Control
                id="appNum"
                type="text"
                placeholder="Appointment Number"
                onChange={(e) => handle(e)}
                required/>
            </Form.Group>
            <Form.Group>
                <Form.Control
                id="datetime"
                as="textarea"
                placeholder="Date and Time"
                onChange={(e) => handle(e)}
                required/>
            </Form.Group>

            <Button variant="success" type="submit" block>Update Appointment</Button>
        </Form>
    )
}

export default AddForm;

后端路由/API代码（server.js） #

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const cors = require("cors");
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");

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

const JWT_SECRET = "sdaikdhjiIHDiu8987J(@?!dDSF8645DAsadA[]ds54aASD()21asd1SFP";
const mongooseURL =
  "mongodb+srv://client:lolpassword@cluster0.lfrgaha.mongodb.net/?retryWrites=true&w=majority";

// 启动服务器
app.listen(5001, () => {
  console.log("Server started successfully.");
});

// 连接数据库
mongoose
  .connect(mongooseURL, {
    useNewUrlParser: true,
  })
  .then(() => {
    console.log("Connected to database successfully");
  })
  .catch((e) => console.log(e));

require("./models/appointmentDetails");
const AppDetails = mongoose.model("AppointmentDetails");

// 添加数据到数据库
app.post("/addAppDetails", async(req, res) => {
  const newAppDetails = new AppDetails(req.body);

  try{
      await newAppDetails.save(); // 需添加await确保保存完成后再响应
      res.send(newAppDetails);
  }
  catch(err){
      console.log(err);
      res.status(500).send(err); // 原代码中error未定义，改为err
  }
});

数据库模型代码（appointmentDetails.js） #

const mongoose = require("mongoose"); // 需导入mongoose模块，原代码缺失

const AppDetails = new mongoose.Schema(
    {
        pName: String,
        appNum: String,
        datetime: String,
        status: String,
        action: String,
    },
    {
        collection: "AppointmentDetails",
    }
);

mongoose.model("AppointmentDetails", AppDetails);

404错误排查及修复方案 #

1. 前端请求地址不匹配（核心原因） #

后端服务运行在5001端口，而前端默认会向当前页面所在的域名+端口发送请求（例如前端运行在3000端口时，请求地址是http://localhost:3000/addAppDetails），但该地址不存在，导致404。

修复方式二选一：

• 直接修改Axios请求地址为后端完整URL：

  axios.post("http://localhost:5001/addAppDetails", {
      pName: appData.pName, 
      appNum: appData.appNum, 
      datetime: appData.datetime, 
  })
  

• 配置前端代理（以Create React App为例）：在package.json中添加"proxy": "http://localhost:5001"，这样前端发送的/addAppDetails请求会自动转发到后端5001端口。

2. 模型文件缺失mongoose导入 #

appointmentDetails.js中未导入mongoose模块，会导致模型无法正常创建，可能间接引发路由问题，需补充导入代码。

3. 后端异步操作未加await #

newAppDetails.save()是异步操作，原代码未加await会导致响应提前发送，虽不直接引发404，但可能导致数据未正确保存，需添加await关键字。

4. 后端catch块参数错误 #

原代码中res.status(500).send(error)里的error未定义，应改为err，避免控制台报错。

5. 前端组件未导入依赖 #

代码中使用了Form和Button组件，但未导入React Bootstrap模块，需补充导入语句。

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