前后端路径对接故障：仅部分路径合并成功，请求技术排查

我正尝试实现React前端与Express后端的路径对接，但仅部分路径能成功合并，另一部分无法正常工作。已尝试调整路由前缀（如改为/api/add），但问题仍未解决，无法定位代码错误，恳请帮忙排查。

服务端文件 #

const express = require("express");
const path = require("path");
const cors = require("cors");
const mongoose = require("mongoose");

require("dotenv").config();

const app = express();
const port = process.env.PORT;

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

const uri = process.env.ATLAS_URI;
mongoose.connect(uri);

const connection = mongoose.connection;
connection.once("open", () => {
  console.log("MongoDB is connected man... ");
});

const nameRouter = require("./routes/name");
const addRouter = require("./routes/addstu");

app.use("/addname", nameRouter);
app.use("/add", addRouter);

// 服务生产环境静态资源
const __dirname1 = path.resolve();

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname1, "/public")));
  app.get("*", (req, res) =>
    res.sendFile(path.resolve(__dirname1, "/public/index.html"))
  );
} 

app.get("/", (req, res) => {
    res.send("API is running..");
});

// 把listen放在所有路由注册之后
app.listen(port, () => {
  console.log(`Server is running on port: ${port}`);
});

路由1（/routes/name） #

var express = require("express");
var router = express.Router();
const Name = require("../modules/name");

router.get("/", async function (req, res, next) {
  try {
    const names = await Name.find();
    res.json({
      success: true,
      content: names,
    });
  } catch (e) {
    res.json({
      success: false,
      error: e.message,
    });
  }
});

router.post("/", async function (req, res, next) {
  try {
    const names = new Name(req.body);
    await names.save();
    res.json({
      success: true,
      studentId: names._id,
    });
  } catch (e) {
    res.json({
      success: false,
      error: e.message,
    });
  }
});

router.route('/:id').get((req, res) => {
 Name.findById(req.params.id)
    .then(name => res.json(name))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/:id').delete((req, res) => {
  Name.findByIdAndDelete(req.params.id)
    .then(() => res.json('Student data deleted.'))
    .catch(err => res.status(400).json('Error: ' + err));
});

// 修正PUT路由，添加:id参数并传入更新数据
router.put("/:id", async function (req, res) {
  try {
    const edit = await Name.findByIdAndUpdate(req.params.id, req.body, { new: true });
    console.log(edit);
    res.json({
      success: true,
      studentId: edit._id,
    });
  } catch (e) {
    res.json({
      success: false,
      error: e.message,
    });
  }
});

router.route("/update/:id").post((req, res) => {
  Name.findById(req.params.id)
    .then((data) => {
      data.name = req.body.name;
      data.email = req.body.email;
      data.phone = req.body.phone;
      data.dob = req.body.dob;
      data.gender = req.body.gender;
      data.address = req.body.address;

      data
        .save()
        .then(() => res.json("student data updated!"))
        .catch((err) => res.status(400).json("Error: " + err));
    })
    .catch((err) => res.status(400).json("Error: " + err));
});

module.exports = router;

路由2（/routes/addstu） #

var express = require("express");
var router = express.Router();
const Name = require("../modules/addstu");

router.get("/", async function (req, res, next) {
  try {
     const names = await Name.find();
    res.json({
      success: true,
      data : names
    });
  } catch (e) {
    res.json({
      success: false,
      error: e.message,
    });
  }
});

router.post("/", async function (req, res, next) {
  try {
    const names = new Name(req.body);
    await names.save();
    res.json({
      success: true,
      studentId: names._id,
    });
  } catch (e) {
    res.json({
      success: false,
      error: e.message,
    });
  }
});

module.exports = router;

React App.js 文件 #

function App() {
  return (
    <BrowserRouter>
      <div className="field">
        <div className="field1">
          <Upper />
        </div>
        <div className="container">
          <Routes>
            <Route path="/" element={<Titlepic />} />
            <Route path="/studentlist" element={<div><StudentList/></div>} />
            <Route path="/add" element={<AddStudent1 />} />
            <Route path="/addname" element={<AddName />} />
            <Route path="/edit/:id" element={<EditStudent />} />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

核心问题与修复说明 #

1. 服务端语法与逻辑错误

   • 原代码最外层多余的{}会导致模块执行异常，直接删除即可
   • app.listen需放在所有路由、中间件注册之后，否则部分路由无法被加载
   • 生产环境静态文件路径中，res.sendFile里的__dirname需改为__dirname1，避免路径指向错误

2. Model引用颠倒

   • 路由1（/routes/name）原本引用../modules/addstu，需改为../modules/name；路由2（/routes/addstu）原本引用../modules/name，需改为../modules/addstu，否则数据库操作会找不到对应集合

3. 路由逻辑错误

   • 路由1中的PUT路由原路径为/，无法获取req.params.id，需改为/:id，同时要传入req.body作为更新数据
   • 多处拼写错误sucess需修正为success，避免前后端数据字段不匹配

4. 前后端路由冲突

   • 前端路由（如/add、/addname）与后端API路由前缀同名，建议给所有API路由统一添加/api前缀（例如app.use("/api/addname", nameRouter)），避免生产环境下前端路由被API逻辑拦截

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