我正在制作一个注册和登录页面。我无法从页面中得到答案。即使我检查了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)
这是我使用这个函数的地方。我不认为这里可能的bug会影响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部分的端口没有问题。
1条答案
按热度按时间hmae6n7t1#
欢迎您来到中国!
所以我看了一下你的代码,我想问题可能出在这里:
注册页面的路径是
/register
,但您在其他地方使用/api/register
,这可能会给您错误,因为它试图向不存在的端点发送POST请求。