React表单Axios Post请求MongoDB出现404错误求助

我在React中开发了一个简单表单，用于提交用户信息创建角色并存储到MongoDB，但发送Axios POST请求时持续出现404错误。server.js与CreatePersona.js中的请求URL均为/api，无法定位问题所在。

此前尝试将Axios替换为直接使用Mongoose，却遇到mongoose.connect不是函数或无法读取undefined的connect属性的错误。

错误信息 #

Error posting data to MongoDB Atlas: Axios error (message: 'Request failed with status code 404', code: 'ERR_BAD_REQUEST')

代码片段 #

CreatePersona.js #

import React, { useState } from 'react';
import axios from 'axios';

const AddStaff = () => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            await axios.post('/api', {
                title: title,
                content: content
            });

            console.log('Data posted to MongoDB Atlas successfully');
        } catch (error) {
            console.error('Error posting data to MongoDB Atlas:', error);
        }
    };

    return (
        <div>
            <h1>Posting data from HTML to MongoDB Atlas</h1>
            <form className="container" onSubmit={handleSubmit}>
                <div className="form-group">
                    <input
                        className="form-control"
                        name="title"
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                    />
                </div>
                <div className="form-group">
          <textarea
              className="form-control"
              name="content"
              value={content}
              onChange={(e) => setContent(e.target.value)}
          ></textarea>
                </div>
                <button type="submit">Add to MongoDB</button>
            </form>
        </div>
    );
};

export default AddStaff;

server.js #

const express = require("express");
const mongoose = require("mongoose").default;
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();
app.use(cors());
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

mongoose.connect("mongodb+srv://firstlasname:Passwrod@database.6vwwqff.mongodb.net/myDatabase?retryWrites=true&w=majority", {
    useNewUrlParser: true,
    useUnifiedTopology: true
})
    .then(() => {
        console.log("Connected to MongoDB Atlas");
        app.listen(port, () => {
            console.log("Server is running on port " + port);
        });
    })
    .catch((error) => {
        console.error("Error connecting to MongoDB Atlas:", error);
    });

const staffSchema = new mongoose.Schema({
    title: String,
    content: String
});

const Staff = mongoose.model("Staff", staffSchema);

app.post("/api", async (req, res) => {
    try {
        const newStaff = new Staff({
            title: req.body.title,
            content: req.body.content
        });

        await newStaff.save();

        res.send("Data posted to MongoDB Atlas successfully");
    } catch (error) {
        console.error("Error posting data to MongoDB Atlas:", error);
        res.status(500).send("Error posting data to MongoDB Atlas");
    }
});

解决方法 #

1. 修复Axios请求的路径/跨域问题 #

React开发服务器默认端口为3000，你的Express服务器也使用了3000，会导致端口冲突，可通过以下两种方式解决：

方案A：修改Express端口

将server.js中的port改为5000（或其他未被占用的端口），同时在React的Axios请求中填写完整URL：

await axios.post('http://localhost:5000/api', { title, content });

方案B：配置React代理

在React项目的package.json中添加一行：

"proxy": "http://localhost:3000"

配置完成后需重启React开发服务器才能生效。

2. 修复Mongoose导入问题 #

Mongoose v6+版本无需添加.default后缀，直接修改server.js中的导入语句：

const mongoose = require("mongoose");

3. 验证服务器路由与MongoDB连接 #

• 启动Express服务器后，用Postman或curl测试POST http://localhost:3000/api（端口修改后对应调整），确认路由是否正常响应。
• 若服务器返回500错误，检查MongoDB Atlas连接字符串：
  • 确认用户名、密码无误（密码含特殊字符需转义）
  • 确认Atlas控制台已将本地IP加入白名单（测试阶段可临时允许所有IP访问）

4. 额外优化建议 #

• Express 4.16+已内置body-parser功能，可替换原有代码：

// 替换body-parser的两行配置
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

• 表单提交成功后可清空输入框，提升用户体验：

await axios.post(...);
setTitle('');
setContent('');

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