React-Express应用注册新用户时出现404 Error问题排查

在React-Express应用中注册新用户时触发「404 (Not Found)」错误，问题大概率和路由配置或Express服务器设置有关，以下是排查思路、解决方案及相关代码验证：

相关代码 #

Register.jsx #

import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import Axios from 'axios';

const Register = () => {
  const [email, setEmail] = React.useState('');
  const [userName, setUserName] = React.useState('');
  const [password, setPassword] = React.useState('');
  const navigateTo = useNavigate();

  const createUser = (e) => {
    e.preventDefault();

    Axios.post("http://localhost:5000/user/register", {
      Email: email,
      UserName: userName,
      Password: password,
    })
      .then(() => {
        console.log("User has been created!");
        navigateTo("/login");

        setEmail("");
        setUserName("");
        setPassword("");
      })
      .catch((error) => {
        if (error.response) {
          console.log(error.response.data);
          console.log("Server answered with an error");
        } else if (error.request) {
          console.log("Network error");
        } else {
          console.log("Unexpected error:", error.message);
        }
      });
  };

  return (
    <>
      {/* Your JSX code here */}
    </>
  );
};

export default Register;

server.js #

const express = require("express");
const cors = require("cors");
const port = process.env.PORT || 5000;
const app = express();
const userRoutes = require("./controllers/userController.js");

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

app.use('/user', userRoutes); // Updated route path to '/user'

app.listen(port, () => {
  console.log(`Server online on port ${port}`); // 修正日志格式，便于确认端口
});

userController.js #

const express = require("express");
const router = express.Router();
const bcrypt = require("bcryptjs");
const db = require("../dataBase/dbConnection");

router.post("/register", async function (req, res) {
  const { Email, UserName, Password } = req.body;

  try {
    const hashedPassword = await bcrypt.hash(Password, 10);

    const SQL = 'INSERT INTO Users (email, username, password) VALUES (?, ?, ?)';
    const values = [Email, UserName, hashedPassword];

    await db.query(SQL, values);

    console.log('User inserted successfully!');
    res.send({ message: 'User added!' });
  } catch (error) {
    console.error("Register Error:", error);
    res.status(500).send({ error: "Register error" });
  }
});

module.exports = router; // 新增：导出路由对象，这是解决404的关键

排查思路 #

• 验证服务器状态：启动服务器后，确认控制台输出Server online on port 5000，确保端口与React请求地址一致
• 检查路由挂载逻辑：确认主服务器文件(server.js)正确引用并挂载了用户路由，且路由文件(userController.js)正确导出了Router对象
• 测试独立API端点：用Postman/curl直接发送POST请求到http://localhost:5000/user/register，验证端点是否可访问
• 检查请求体解析：确认Express已通过express.json()中间件解析JSON请求体，且React请求的Content-Type为application/json
• 核对文件路径与拼写：检查所有文件引用路径、路由路径的大小写与拼写是否完全匹配

核心解决方案 #

关键修复：导出路由对象
原userController.js未导出router对象，导致server.js无法挂载该路由，请求时自然返回404。在userController.js末尾添加module.exports = router;即可解决路由未生效的问题。

额外优化

• 修正server.js中的日志输出格式，便于清晰查看服务器运行端口
• 测试API端点时，若返回500错误，再排查数据库连接或SQL语句问题（但404问题优先解决路由挂载）

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