基于Node.js和MongoDB的注册/登录页面POST请求404错误排查

开发注册与登录页面时，页面无法响应请求，POST请求返回404 (Not Found)，已查阅POST方法示例但未定位到错误，相关代码如下：

前端注册页面代码 #

import { useState } from 'react'

function App() {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    async function registerUser(event) {
        event.preventDefault()

        const response = await fetch('http://localhost:3000/api/register', {
            method:"POST",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                name,
                email,
                password,
            }),
        })

        const data = await response.json()

        if (data.status === 'ok') {
            history.push('/login')
        }
    }

    return (
        <div>
            <h1>Register</h1>
            <form onSubmit={registerUser}>
                <input
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    type="text"
                    placeholder="Name"
                />
                <br />
                <input
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    type="email"
                    placeholder="Email"
                />
                <br />
                <input
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    type="password"
                    placeholder="Password"
                />
                <br />
                <input type="submit" value="Register" />
            </form>
        </div>
    )
}

export default App

请求报错信息 #

const response = await fetch('http://localhost:3000/api/register', {
            method:"POST",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                name,
                email,
                password,
            }),
        })
// 报错：Register.js:14 POST http://localhost:3000/api/register 404 (Not Found)

后端服务代码 #

const express = require("express")
const app = express()
const cors = require("cors")
const mongoose = require("mongoose")
const User = require("./models/user.model")
mongoose.connect("mongodb://localhost:27017/test-db")

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

app.post("/api/register",async(req,res)=>{
    console.log(req.body)
    try {
         await User.create({
            name:req.body.name,
            email:req.body.email,
            password:rawListeners.body.password // 此处存在错误
        })
        res.json({status:"ok"})
    } catch (err) {
        res.json({status:"error",error:"Duplicate email"})
    }
})
app.post("/api/login",async(req,res)=>{
        const user= await User.findOne({
            email:req.body.email,
            password:req.body.password
        })

        if(user){
            return res.json({status:"ok", user:true})
        }else{
            return res.json({status:"error",user:false})
        }
})

app.listen(3000,()=>{
    console.log("Server started")
})

路由配置代码 #

import React from 'react'
import { BrowserRouter, Route, Routes,Router } from 'react-router-dom'
import Login from './pages/Login'
import Register from './pages/Register'

const App = () => {
    return (
        <div>
            <BrowserRouter>
            <Routes>
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
            </Routes>
            </BrowserRouter>
        </div>
    )
}

export default App

问题定位与解决步骤 #

1. 后端接口语法错误 #

后端注册接口中，密码字段写成了rawListeners.body.password，这是明显笔误，需改为req.body.password。该错误会导致后端创建用户时抛出异常，若服务因此崩溃，会直接触发404错误。

2. 前端导航方法错误 #

React Router v6已移除history.push的直接使用方式，需改用useNavigate钩子：

import { useState, useNavigate } from 'react'

function App() {
    const navigate = useNavigate() // 初始化导航钩子
    // ... 其他代码

    async function registerUser(event) {
        // ... 请求逻辑
        if (data.status === 'ok') {
            navigate('/login') // 使用navigate跳转
        }
    }
}

3. 端口冲突导致服务未启动 #

若前端使用Create React App等框架，默认启动端口为3000，会与后端服务端口冲突，导致后端无法正常启动，从而返回404。解决方法：

• 修改后端端口：将app.listen(3000)改为其他端口（如3001），同时前端请求地址改为http://localhost:3001/api/register
• 或修改前端端口：在React项目中通过.env文件设置PORT=3001，避免端口冲突

4. 确认后端服务状态 #

检查后端控制台是否输出Server started，确保MongoDB已正常启动、后端连接数据库无异常。若后端未启动，前端请求必然返回404。

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