MERN栈后端CRUD正常 React/Axios前端请求404错误求助

后端CRUD接口经Postman测试正常，但通过React+Axios调用时抛出AxiosError: Request failed with status code 404错误。

后端相关代码 #

后端路由及创建用户的处理函数：

userRouter.route("/").post(createUser);

const createUser = async (req, res) => {
  try {
    const newUser = await User.create(req.body);
    res.status(201).json({
      status: "success",
      data: { newUser },
    });
  } catch (err) {
    res.status(400).json({
      status: "failed",
      message: err,
    });
  }
};

前端请求代码 #

React表单提交时的Axios请求函数：

const Submit = (e) => {
    e.preventDefault();
    axios
      .post("http://localhost:3040/createUser", {
        name,
        email,
      })
      .then((result) => console.log(result))
      .catch((err) => console.log(err));
  };

问题分析与解决方案 #

1. 路由路径不匹配 #

后端userRouter大概率不是直接挂载在根路径/下。比如如果后端是这样挂载路由的：

app.use('/api/users', userRouter);

那实际创建用户的接口路径应为/api/users，但前端请求的是/createUser，完全不匹配导致404。

解决：

• 核对后端userRouter的挂载前缀，将前端请求地址改为对应路径，比如http://localhost:3040/api/users。
• 后端仅在userRouter的根路径（/）配置了POST接口，不存在/createUser这个路由，需删除前端请求路径中的createUser部分，替换为后端实际的路由前缀。

2. 跨域配置缺失（附带排查） #

虽然报错是404，但如果后端未配置跨域，浏览器拦截请求后也可能表现为异常状态码。可补充跨域配置验证：

npm install cors

在后端入口文件添加：

const cors = require('cors');
app.use(cors());

3. 端口/地址不一致 #

确认后端服务确实运行在3040端口，前端请求的地址、端口与后端启动日志显示的一致。

额外检查 #

查看后端路由挂载逻辑，确认是否有路由前缀、中间件（如身份验证）导致路径无法匹配，或是否存在路由顺序问题（比如404兜底路由提前匹配）。

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