提交注册表单时遇Axios错误：Cannot POST '/api/user'求助

问题分析与解决方案 #

出现 Cannot POST '/api/user' 及 bad request 错误，主要由以下几个核心问题导致，逐一修复即可：

1. 前后端字段名大小写不匹配 #

前端发送的字段是 Name、Email，但后端控制器期望的是小写的 name、email，导致后端无法正确获取参数，触发"请填写所有字段"的校验错误。

修复前端代码：
在 submitHandler 函数中修改请求体的字段名：

const { data } = await axios.post("/api/user",
    { name: Name, email: Email, password, pic }, // 改为后端期望的小写字段名
    config
);

2. 跨域请求（CORS）拦截 #

如果前端和后端运行在不同端口（比如前端3000、后端8000），浏览器会默认拦截跨域请求，导致无法访问 /api/user 接口。

修复后端代码：
先安装CORS依赖：

npm install cors

在 server.js 中引入并启用CORS中间件：

const cors = require('cors');
// 在express.json()之后添加
app.use(cors());

3. Axios请求地址指向错误 #

前端默认会向当前页面的域名发送请求，如果前后端不在同一端口，需要明确指定后端的请求地址。

两种修复方式：

• 方式一：全局设置Axios baseURL
  在前端代码顶部添加：

axios.defaults.baseURL = 'http://localhost:8000'; // 替换为你的后端运行地址

• 方式二：使用React代理转发
  在前端项目的 package.json 中添加：

"proxy": "http://localhost:8000"

这样前端的 /api/user 请求会自动转发到后端对应接口。

4. 后端错误处理逻辑缺陷 #

registerUser 函数中，参数校验代码在try块之外，且catch块中抛出错误会导致服务器返回500状态码，而非预期的400错误。

修复后端userController.js：
将参数校验移到try块内，并在异常分支直接返回错误响应：

const registerUser = async (req, res) => {
    try {
        const { name, email, password, pic } = req.body;

        if (!name || !email || !password) {
            return res.status(400).json({ message: "请填写所有必填字段" });
        }

        const userExists = await User.findOne({ email });

        if (userExists) {
            return res.status(400).json({ message: "该用户已存在" });
        }

        const user = await User.create({
            name,
            email,
            password,
            pic,
        });

        if (user) {
            res.status(201).json({
                _id: user._id,
                name: user.name,
                email: user.email,
                pic: user.pic,
                token: generateToken(user._id),
            });
        } else {
            res.status(400).json({ message: "创建用户失败" });
        }
    } catch (err) {
        console.log(err);
        res.status(400).json({ message: "创建用户失败" });
    }
};

5. 可选优化（不影响功能但提升体验） #

• 前端确认密码输入框的placeholder拼写错误：Confiem password → Confirm password
• 前端状态初始化时建议设置默认空字符串：const [Name, setName] = useState('');，避免初始值为undefined的潜在问题

完成以上修复后，重启前后端服务，注册功能即可正常提交数据到MongoDB Atlas。

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