使用 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 請求。