Express.js路由冲突致捐赠表单报错、注册路由404问题求助

我使用Node.js、Express.js和MongoDB搭建网站并连接数据库，设有捐赠表单和注册表单，二者使用不同的Schema与路由。单独使用捐赠表单时功能正常，但引入注册路由后出现以下问题：

• 提交捐赠表单会触发“网络断开”错误；
• 提交注册表单则返回404 Not Found错误。
  注释掉注册路由后，捐赠表单恢复正常工作。

相关代码 #

用户路由代码 #

const express = require('express');
const User = require('../models/User');

const router = express.Router();

router.post('/signup', async (req, res) => {
    try {
        const { firstName, lastName, email, password } = req.body;
        const user = new User({ firstName, lastName, email, password });

        await user.save();
        res.status(201).send({ message: "Sign Up successful" });
    } catch (error) {
        res.status(400).send({ error: "Error signing up" });
    }
});

module.exports = router;

服务器代码 #

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const userRoutes = require('./routes/UserRoute');

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

// Middleware
app.use(bodyParser.json());
app.use(cors());
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/NGO', {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => {
    console.log("Connected to MongoDB");
}).catch(err => {
    console.error("Could not connect to MongoDB", err);
});

// Donation Schema and Model
const donationSchema = new mongoose.Schema({
    firstName: String,
    lastName: String,
    email: String,
    phone: String,
    donationType: String,
    paymentMethod: String,
    amount: Number,
    date: { type: Date, default: Date.now }
});
const Donation = mongoose.model('Donation', donationSchema);

// Donation Route
app.post('/donate', async (req, res) => {
    try {
        const { firstName, lastName, email, amount, phone, donationType, paymentMethod } = req.body;
        const donation = new Donation({
            firstName,
            lastName,
            email,
            amount,
            phone,
            donationType,
            paymentMethod
        });

        await donation.save();
        res.status(201).send({ message: "Donation saved successfully" });
    } catch (error) {
        res.status(400).send({ error: "Error saving donation" });
    }
});

//use User Routes
app.use('/signup', userRoutes);

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

表单处理脚本代码 #

signUpForm.addEventListener('submit', async function (event) {
        event.preventDefault();
        const userFirstName = document.getElementById('userFirstName').value;
        const userLastName = document.getElementById('userLastName').value;
        const userEmail = document.getElementById('userEmail').value;
        const password = document.getElementById('pwd').value;
        const passwordConfirm = document.getElementById('pwdConfirmation').value;
        let confirmationMessage = document.getElementById('SignUpConfirmationMessage');

        // Validate form data
        if (userFirstName && userLastName && userEmail && password === passwordConfirm) {
            try {
                const response = await fetch('http://localhost:3000/signup', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        firstName: userFirstName,
                        lastName: userLastName,
                        email: userEmail,
                        password: password
                    })
                });
                const data = await response.json();
                if (response.ok) {
                    confirmationMessage.textContent = 'Sign up successful!';
                    signUpForm.reset();
                } else {
                    confirmationMessage.textContent = 'There was an issue processing your request. Please try again';
                }
            } catch (error) {
                confirmationMessage.textContent = 'There was an issue processing your request. Please try again';
            }
        } else if (password !== passwordConfirm) {
            confirmationMessage.textContent = 'Passwords do not match';
            document.getElementById('pwd').value = '';
            document.getElementById('pwdConfirmation').value = '';
            console.log('Passwords do not match');
        } else {
            console.log('Please fill in all details correctly');
        }
    });
}

问题原因 #

1. 注册表单404错误：
   服务器中用app.use('/signup', userRoutes)挂载用户路由，但用户路由内部又定义了router.post('/signup')，导致实际注册接口的路径变成了/signup/signup，而前端请求的是/signup，因此返回404。
2. 捐赠表单网络错误：
   路由路径的冲突导致Express的路由匹配逻辑异常，加上服务器中同时使用了重复的bodyParser.json()和express.json()中间件，进一步干扰了请求的正常处理。

解决方案 #

1. 修正注册路由的路径匹配（二选一即可） #

方案A：修改服务器的路由挂载路径

将服务器中的app.use('/signup', userRoutes)改为：

app.use('/', userRoutes);

这样用户路由内的/signup会直接映射到根路径下的/signup，与前端请求路径一致。

方案B：修改用户路由的内部路径

将用户路由中的router.post('/signup', ...)改为：

router.post('/', async (req, res) => {
    // 原有逻辑不变
});

保持服务器的app.use('/signup', userRoutes)不变，此时接口路径仍为/signup。

2. 清理冗余中间件 #

服务器中bodyParser.json()和express.json()功能重复（Express 4.16+自带的express.json()已能处理JSON请求体），删除app.use(bodyParser.json())即可。

3. 验证修复效果 #

启动服务器后，分别测试捐赠表单（请求/donate）和注册表单（请求/signup），确认两个接口均能正常响应，无404和网络错误。

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