React用户注册出现Cannot POST /api/users/register 404错误求助

运行React应用提交注册数据时，控制台抛出Cannot POST /api/users/register错误，数据库无数据写入，注册流程完全失败。以下是前后端相关代码及排查解决步骤：

后端代码 #

server.js #

const express = require("express");
const path = require("path");
const app = express();
const dbConnection = require("./Db/db");
app.use(express.json());

const port = process.env.PORT || 8000;

app.use("/api/cars/", require("./Routes/carsRoutes"));
//refresh error
app.use("/booking/api/cars/", require("./Routes/carsRoutes"));
app.use("/editcar/api/cars/", require("./Routes/carsRoutes"));
app.use("/api/users/", require("./Routes/usersRoutes"));
app.use("/booking/api/bookings/", require("./Routes/bookingsRoute"));
app.use("/api/bookings/", require("./Routes/bookingsRoute"));
if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}
app.listen(port, () => {
  console.log(`Server is running at port: ${port} `);
});

db.js #

const mongoose = require("mongoose");

function connectDb() {
  mongoose.connect("mongodb+srv://abc:123@abcd.xmqfw5n.mongodb.net/?retryWrites=true&w=majority", {
    useUnifiedTopology: true,
    useNewUrlParser: true,
  });
  const connection = mongoose.connection;
  connection.on("connected", () => {
    console.log("connection successfull");
  });
  connection.on("error", () => {
    console.log("connection failed");
  });
}

connectDb();
module.exports = mongoose;

userController.js #

const User = require("../Models/userModal");
exports.login = async (req, res) => {
  const { email, password } = req.body;
  try {
    const user = await User.findOne({ email, password });
    if (user) {
      res.send(user);
    } else {
      return res.status(400).json(error);
    }
  } catch (error) {
    return res.status(400).json(error);
  }
};
exports.register = async (req, res) => {
  try {
    const newuser = new User(req.body);
    await newuser.save();
    res.send("User registered successfully");
  } catch (error) {
    return res.status(400).json(error);
  }
};

userModel.js #

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  username: { type: String, required: true },
  password: { type: String, required: true },
  email: { type: String, required: true },
  phone: { type: String },
  admin: {
    type: Boolean,
    default: false,
  },
});

const userModel = mongoose.model("users", userSchema);

module.exports = userModel;

userRoutes.js #

const express = require("express");
const router = express.Router();
const userController = require("../Controllers/userController");
router.post("/login", userController.login);
router.post("/register", userController.register);
module.exports = router;

前端代码 #

client/userActions.js #

import axios from "axios";
import { message } from "antd";

export const userLogin = (reqObj) => async (dispatch) => {
  dispatch({ type: "LOADING", payload: true });

  try {
    const response = await axios.post("/api/users/login", reqObj);
    const { admin, username, _id } = response.data;
    localStorage.setItem("user", JSON.stringify({ admin, username, _id }));
    message.success("Login success");
    dispatch({ type: "LOADING", payload: false });
    setTimeout(() => {
      window.location.href = "/";
    }, 500);
  } catch (error) {
    console.log(error);
    message.error("Something went wrong");
    dispatch({ type: "LOADING", payload: false });
  }
};

export const userRegister = (reqObj) => async (dispatch) => {
  dispatch({ type: "LOADING", payload: true });

  try {
    await axios.post("/api/users/register", reqObj);
    message.success("Registration successfull");
    setTimeout(() => {
      window.location.href = "/login";
    }, 500);

    dispatch({ type: "LOADING", payload: false });
  } catch (error) {
    console.log(error);
    message.error("Something went wrong");
    dispatch({ type: "LOADING", payload: false });
  }
};

排查与解决步骤 #

1. 确认开发环境代理配置
   开发环境下React默认跑在3000端口，后端在8000端口，需在前端package.json中添加代理转发：

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

   确保前端请求能正确转发到后端服务。

2. 验证后端服务状态
   启动后端后，检查控制台是否输出Server is running at port: 8000和connection successfull，确认服务启动、数据库连接正常。

3. 直接测试接口可用性
   用Postman或curl发送请求：POST http://localhost:8000/api/users/register，请求体携带{username: "test", password: "123456", email: "test@example.com"}：

   • 若仍报错，检查路由文件路径是否正确（Node.js对路径大小写敏感）；
   • 确认userRoutes.js是否正确导出、server.js是否正确引入该路由。

4. 检查请求体解析与格式
   后端已配置app.use(express.json());，需确保前端请求头包含Content-Type: application/json，且请求体字段与userModel.js定义的Schema一致。

5. 生产环境路径校验
   生产环境下，app.get("*")仅处理GET请求，POST接口不会被重定向到index.html，需确认后端接口地址配置正确，前端构建文件放置在指定目录。

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