使用 Node.Js 和 MongoDB 在注册/登录页面上未发现 Post-404 错误

Question

我正在制作一个注册和登录页面。 我无法从页面得到答案。即使我检查了 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)

这是我使用此功能的部分。 我不认为这里可能的错误会影响 POST 方法，但我还是分享了它。

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

检查了post方法，我猜是有错误的。 Fetch部分的端口没有问题。

Answer 1

欢迎来到 SO！

所以我看了一下你的代码，我认为问题可能出在这里：

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

注册页面的路径是/register ，但您在其他地方使用/api/register 。 这可能会给您带来错误，因为它会尝试向不存在的端点发送 POST 请求。