MERN栈项目向MongoDB Atlas提交表单时Axios POST请求404错误

问题根源 #

接口路径不匹配导致404：

• 前端Axios请求路径为 http://localhost:5000/users
• 后端实际接口路径为 http://localhost:5000/api/users/users（server.js以/api/users挂载userRoutes，而userRoutes内部又定义了/users的POST路由，两者叠加形成了冗余路径）

修复方案（二选一即可） #

方案1：调整前端请求路径 #

在UserForm.js的handleSubmit函数中，将Axios请求地址修改为正确的接口路径：

const response = await axios.post('http://localhost:5000/api/users', userData);

方案2：调整后端路由定义 #

在UserRoutes.js中，将POST路由的路径改为根路径，与server.js的挂载路径组合后形成/api/users：

router.post('/', async (req, res) => {
    try {
      const userData = req.body;
      console.log('Received user data:', userData);
      const user = new User(userData);
      const savedUser = await user.save();

      res.json(savedUser);
      console.log(savedUser)
    } catch (error) {
      console.error('Error processing /users route:', error);
      res.status(500).json({ error: 'Internal Server Error' });
    }
  });

额外验证点 #

• 确认服务器控制台输出Server is running on port 5000，确保服务正常启动
• 检查connectDB是否成功连接数据库，无报错信息
• 可通过Postman直接请求http://localhost:5000/api/users（修改后路径）验证接口可用性

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