MERN栈项目提交数据失败：POST /add 404错误排查请求

我用MERN栈开发项目，客户端和服务端都能正常执行npm start启动。在http://localhost:3000/页面填写数据并提交后，数据无法存入MongoDB，控制台提示POST http://localhost:3000/add 404 (Not Found)及未捕获的Promise错误，错误指向客户端的stepContext.js文件。需要确认问题出在客户端还是服务端，相关代码如下：

客户端stepContext.js代码 #

import React, { createContext, useState } from 'react'
import { useHistory } from 'react-router-dom';
import axios from 'axios'

export const multiStepContext = createContext();

export default function StepContext(props) {
    const history = useHistory();
    const [currentStep , setCurrentStep] = useState(1);
    const [userData , setUserData] = useState([]);
    const [finalData , setFinalData] = useState([]);
const [transferData , setTransferData] = useState([]);

  async  function submitData(){
        setFinalData(finalData => [...finalData,userData]);
        console.log(userData)
     await   axios.post("/add",userData);
        setUserData('');
        setCurrentStep(1);
        history.push("/customers");
    }
  async  function sendMoney() {
     await   axios.post("/customer/money" , transferData);
        history.push("/customers");
    }

    return (
       <multiStepContext.Provider value={{currentStep, setCurrentStep,userData , setUserData,finalData , setFinalData, submitData,transferData,setTransferData,sendMoney}}>
           {props.children}
       </multiStepContext.Provider>
    )
}

服务端index.js代码 #

const express = require('express')
const mongoose = require('mongoose')
 const app = express();
app.use(express.json());

const PORT  = 5000;
const DB = 'mongodb+srv://salunkherushikesh859:<passwd>@cluster0.tpdffqx.mongodb.net/login?retryWrites=true&w=majority'
mongoose.connect(DB,{
    useNewUrlParser:true,
    useCreateIndex:true,
    useFindAndModify:false,
    useUnifiedTopology:true
}).then(() => console.log("DB connected"))
.catch((e) => console.log(e))

 
app.use(express.json());
const userRoute = require("./routes/userData")
app.use(userRoute)
 
if ( process.env.NODE_ENV === "production"){
    app.use(express.static("client/build"));
    const path = require("path");
    app.get("*", (req, res) => {
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    })
}
app.listen(PORT,() => console.log(`PORT is running at ${PORT}`))

路由文件userData.js代码 #

const express = require("express");
const transactions = require("../models/transactionSchema");
const router = express.Router();
const user = require("../models/userSchema");

router.post("/add", async (req, res) => {
  const {
    firstName,
    lastName,
    
  } = req.body;
  if (
    !firstName ||
    !lastName ||
     
  ) {
    return res.status(400).json({ msg: "Please fill all the details" });
  }
  const newUser = new user({
    firstName,
    lastName,
   
  });

  await newUser.save();
});

router.get("/customers", async (req, res) => {
  try {
    const User = await user.find();
    res.send(User);
     console.log(User)
    //   res.status(200).json(User.favourite);
    // console.log(User.favourite)
  } catch (e) {
    console.log(e);
    res.status(500).json();
  }
});

router.get("/customers/:id", async (req, res) => {
  // const { id} = req.body;
  // console.log(req.params.id);
  const data = await user.findById(req.params.id);
  // console.log(data);
  if (data) {
    res.send(data);
     console.log(data);
  }
});

router.put("/customer/money", async (req, res) => {
  // console.log(req.body)
  try {
    const { id, count, id2 } = req.body;
    const data = await user.findById(id);
    const data2 = await user.findById(id2);
    data2.amount = count + data2.amount;
    data.amount = data.amount - count;
    data.save();
    data2.save();
    res.send("updated successfull");
  } catch (e) {
    console.log(e.message);
  }
  // data.update({amount:amount1})

  // res.send("The amount is debited rupees from _ and creidet to rupess _ ")
});


router.post("/transactions" , async(req,res) => {
  try {
  const { id, count, id2 } = req.body;
  const data = await user.findById(id);
  const data2 = await user.findById(id2);
// console.log(req.body);
  const newTrans = new transactions({
    userOne : data.name,
    userTwo:data2.name,
    amount:count
  })

  await newTrans.save();
} catch (e) {
  console.log(e);
}
})


router.get("/gettransactions", async (req,res) => {
  try {
    const data = await transactions.find();
    res.send(data);
    // console.log(data)
  } catch (e) {
    console.log(e);
    res.status(500).json();
  }
})
module.exports = router;

问题定位与修复方案 #

核心问题 #

404错误的本质是客户端请求地址与服务端接口不匹配：

1. 客户端axios请求/add时，默认发送到当前页面的3000端口，但服务端运行在5000端口，导致请求找不到对应接口。
2. 服务端路由虽已注册，但缺少请求转发配置，客户端无法跨端口访问服务端接口。

修复步骤 #

1. 配置客户端代理

在React项目的package.json中添加代理字段，自动将API请求转发到服务端端口：

"proxy": "http://localhost:5000"

修改后重启客户端服务，axios的相对路径会自动指向5000端口。

2. 完善服务端路由响应

服务端/add路由缺少成功响应，会导致客户端axios请求超时，补充响应代码：

router.post("/add", async (req, res) => {
  const { firstName, lastName } = req.body;
  if (!firstName || !lastName) {
    return res.status(400).json({ msg: "Please fill all the details" });
  }
  const newUser = new user({ firstName, lastName });
  await newUser.save();
  // 添加成功响应
  res.status(201).json({ msg: "User added successfully", user: newUser });
});

3. 捕获客户端Promise错误

在submitData函数中添加错误捕获，避免未捕获的Promise异常：

async function submitData(){
  setFinalData(finalData => [...finalData,userData]);
  console.log(userData)
  try {
    await axios.post("/add",userData);
    setUserData('');
    setCurrentStep(1);
    history.push("/customers");
  } catch (err) {
    console.error("Submit error:", err.response?.data || err.message);
    // 可在此添加用户友好的错误提示
  }
}

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