node.js - POST http://localhost:3000/users/register 404(未找到)
问题描述
我创建了一个反应客户端并将我的注册表单请求发送到节点服务器,但是单击注册按钮时我的控制台中出现以下错误。
“POST http://localhost:3000/users/register 404(未找到)”
请提出解决方案?
../routes/User.js
const users = express.Router()
const cors = require('cors')
const jwt = require("jsonwebtoken")
const bcrypt = require('bcrypt')
const User = require("../models/User")
users.use(cors())
process.env.SECRET_KEY = 'secret'
users.post('/register', (req, res) => {
const today = new Date()
const userData = {
first_name: req.body.first_name,
last_name: req.body.last_name,
email: req.body.email,
password: req.body.password,
created: today
}
User.findOne({
where: {
email: req.body.email
}
})
.then(user => {
if(!user){
bcrypt.hash(req.body.password, 10, (err, hash) => {
userData.password = hash
User.create(userData)
.then(user => {
res.json({status: user.email + ' registered'})
})
.catch(err => {
res.send('error: ' + err)
})
})
} else {
res.json({error: "User already exists"})
}
})
.catch(err => {
res.send('error: ' + err)
})
})
users.post('/login', (req, res) => {
User.findOne({
where: {
email: req.body.email
}
})
.then(user => {
if(user) {
if(bcrypt.compareSync(req.body.password, user.password)) {
let token = jwt.sign(user.dataValues, process.env.SECRET_KEY, {
expiresin: 1440
})
res.send(token)
}
} else {
res.status(400).json({error: 'User does not exist'})
}
})
.catch(err => {
res.status(400).json({ error: err})
})
})
module.exports = users
../client/App.js
import './App.css';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import Navbar from './components/Navbar'
import Landing from './components/Landing'
import Login from './components/Login'
import Register from './components/Register'
import Profile from './components/Profile'
function App() {
return (
<Router>
<div className="App">
<Navbar />
<Route exact path="/" component={Landing} />
<div className="container">
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/profile" component={Profile} />
</div>
</div>
</Router>
);
}
export default App;
../client/src/Register.js
import { register } from './UserFunctions'
class Register extends Component {
constructor() {
super()
this.state = {
first_name: '',
last_name: '',
email: '',
password: ''
}
this.onChange = this.onChange.bind(this)
this.onSubmit = this.onSubmit.bind(this)
}
onChange(e){
this.setState({[e.target.name]: [e.target.value]})
}
onSubmit(e){
e.preventDefault()
const user = {
first_name: this.state.first_name,
last_name: this.state.last_name,
email: this.state.email,
password: this.state.password
}
register(user).then(res=> {
this.props.history.push(`/login`)
})
}
render(){
return(
<div className="container">
<div className="row">
<div className="col-md-6 mt-5 mx-auto">
<form noValidate onSubmit={this.onSubmit}>
<h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
<div className="form-group">
<label htmlFor="first_name">First Name</label>
<input type="text"
className="form-control"
name="first_name"
placeholder="Enter First Name"
value={this.state.first_name}
onChange={this.onChange}/>
</div>
<div className="form-group">
<label htmlFor="last_name">Last Name</label>
<input type="text"
className="form-control"
name="last_name"
placeholder="Enter Last Name"
value={this.state.last_name}
onChange={this.onChange}/>
</div>
<div className="form-group">
<label htmlFor="email">Email Address</label>
<input type="email"
className="form-control"
name="email"
placeholder="Enter Email"
value={this.state.email}
onChange={this.onChange}/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password"
className="form-control"
name="password"
placeholder="Enter Password"
value={this.state.password}
onChange={this.onChange}/>
</div>
<button type="submit"
className="btn btn-lg btn-primary btn-block">
Register
</button>
</form>
</div>
</div>
</div>
)
}
}
export default Register
../server.js
var cors = require ('cors')
var bodyParser = require("body-parser")
var app = express()
var port = process.env.PORT || 5000
app.use(bodyParser.json())
app.use(cors())
app.use(bodyParser.urlencoded({extended: false}))
var Users = require('./routes/users')
app.use('/users', Users)
app.listen(port, () => {
console.log("Server is running at port: " + port)
})
./client/src/UserFunctions.js
export const register = newUser => {
return axios
.post('users/register', {
first_name: newUser.firstname,
last_name: newUser.last_name,
email: newUser.email,
password: newUser.password
})
.then(res => {
console.log("Registered");
})
}
export const login = user => {
return axios
.post('users/login', {
email: user.email,
password: user.password
})
.then(res=>{
localStorage.setItem('usertoken', res.data)
return res.data
})
.catch(err => {
console.log(err)
})
}
解决方案
看这个,似乎问题可能出在您的客户端代码上。
您正在尝试访问http://localhost:3000/users/register
,这是您客户端上不存在的路由,但它在服务器上以http://localhost:5000/users/register
. (假设您的服务器正在端口上运行5000
)。
如果您的服务器在端口上运行5000
,您可以在注册功能中尝试此操作...
return axios.post('http://localhost:5000/users/register') // add the rest of your code
除非您在客户端中为您的服务器设置了代理,否则您将不断收到该错误。
推荐阅读
- database - mongodb schema 最佳存储成就系统
- javascript - AngularJs 过滤器:生成 notArray 错误
- timestamp - Zip Archive - 手动设置本地和中央标头的最后修改时间戳
- typo3 - 恢复备份后 TYPO3 出现 CMS 错误
- blob - blob 相对于视频网址的优势
- java - 即使在我停止按键后,keyPressed() 事件也会继续触发
- python - 用 pandas 读取动态表
- python - 为什么这个 pyaudio 程序不产生任何声音?
- angular - Angular 的动态 UI 组合
- c++ - 使用 top() 时收到错误“无法取消引用超出范围的双端队列迭代器”