[英]400 BAD REQUEST when POST using Axios in React with Nodejs/Express
我将 Axios 与 React 结合使用,以将 POST 方法用于我的 Nodejs 服务器。 我第一次尝试它给了我一个关于 CORS 政策的错误。 我已经向其中添加了标头,但它仍然给我 400 的状态代码,并提到了这一点:
xhr.js:166 POST http://localhost:3000/api/user/register 400 (Bad Request)
dispatchXhrRequest @ xhr.js:166
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:49
Promise.then (async)
request @ Axios.js:56
wrap @ bind.js:11
handleFormSubmit @ Register.js:21
onClick @ Register.js:69
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:465
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:480
executeDispatch @ react-dom.development.js:613
executeDispatchesInOrder @ react-dom.development.js:638
executeDispatchesAndRelease @ react-dom.development.js:743
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:752
forEachAccumulated @ react-dom.development.js:724
runEventsInBatch @ react-dom.development.js:769
runExtractedPluginEventsInBatch @ react-dom.development.js:915
handleTopLevel @ react-dom.development.js:5866
batchedEventUpdates$1 @ react-dom.development.js:24314
batchedEventUpdates @ react-dom.development.js:1460
dispatchEventForPluginEventSystem @ react-dom.development.js:5966
attemptToDispatchEvent @ react-dom.development.js:6083
dispatchEvent @ react-dom.development.js:5986
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12259
discreteUpdates$1 @ react-dom.development.js:24331
discreteUpdates @ react-dom.development.js:1485
dispatchDiscreteEvent @ react-dom.development.js:5949
Error: Request failed with status code 400
at createError (createError.js:17)
at settle (settle.js:19)
at XMLHttpRequest.handleLoad (xhr.js:60)
我将 JWT 用于我在 Nodejs 中编写的 Auth - 在端口 5000 上运行
React - 在端口 3000 上运行
我有一些用 PHP 编写的其他功能 - 在端口 8000 上运行
在这里,当我将 React Axios 与 PHP 一起使用时,它在满足 CORS 策略后运行良好。 但是当我对 Nodejs 这样做时,我得到了这个错误。 当我尝试使用 POSTMAN 时,Nodejs Auth 代码工作正常。
这是我在端口 3000 上运行的 React 代码
import React, { Component } from 'react'
import axios from 'axios'
class Register extends Component {
constructor(props) {
super(props)
this.state = {
name: "",
email: "",
password: "",
}
}
handleFormSubmit(e) {
e.preventDefault();
const registerData = JSON.stringify(this.state);
axios({
method: 'POST',
url: 'http://localhost:5000/api/user/register',
headers: {
'Content-Type': 'application/json',
},
data: registerData,
})
.then(result => {
console.log(registerData)
})
.catch(error => console.log(error))
}
render() {
return (
<div>
Register
<br/>
<form action="#">
<label>Full Name</label><br/>
<input
type='text'
id='name'
name='name'
value={this.props.name}
onChange={e => this.setState({ name: e.target.value })} />
<br />
<label>Email</label><br />
<input
type='text'
id='email'
name='email'
value={this.props.email}
onChange={e => this.setState({ email: e.target.value })} />
<br />
<label>Password</label><br />
<input
type='password'
id='password'
name='password'
value={this.props.password}
onChange={e => this.setState({ password: e.target.value })} />
<br />
<input
type='submit'
onClick={e => this.handleFormSubmit(e)} />
<br />
</form>
</div>
)
}
}
export default Register
这是我在 React 上的 package.json:
{
"name": "dontbuy",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"react": "^16.10.0",
"react-dom": "^16.10.0",
"react-native": "^0.61.1",
"react-native-web": "^0.11.7",
"react-router-dom": "^5.1.1",
"react-scripts": "3.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
这是我在端口 5000 上运行的 Nodejs 代码:(我所有的路由都有一个前缀 api/user/* )
const router = require('express').Router();
const User = require('../model/User');
const bcrypt = require('bcryptjs');
const { registerValidation, loginValidation } = require('../validation')
const jwt = require('jsonwebtoken');
//API response
router.post('/register' , async (req, res) => {
//validating the response
const { error } = registerValidation(req.body);
if(error){
return res.status(400).send(error);
}
//Check the user is already in the db
const emailExists = await User.findOne({email: req.body.email});
if(emailExists){
return res.status(400).json({"message" : "Email already exists"});
}
//Hashing the password
const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(req.body.password, salt);
//Creating a new user
const user = new User({
name: req.body.name,
email: req.body.email,
password: hashedPassword,
})
try {
const savedUser = await user.save();
res.send({ user: user._id });
} catch (err) {
res.status(400).send(err);
}
})
//Login
router.post('/login', async (req, res) => {
//validation
const { error } =loginValidation(req.body);
if(error){
return res.status(400).send(error.details[0].message);
}
//check if the email is already exists
const user = await User.findOne({ email: req.body.email });
if (!user) {
return res.status(400).json({"message": "Email or password is incorrect"});
}
const validPassword = await bcrypt.compare(req.body.password, user.password);
//check if password is correct
if(!validPassword) {
return res.status(400).json({"message" :"Password is incorrect"});
}
//create and assign a token
const token = jwt.sign({_id: user._id}, 'secretKey');
res.header('auth-token', token).send(token);
res.send('Logged in')
})
module.exports = router;
回复晚了。 这是一些验证错误,我的 React - 前端验证允许将 API 请求发送到我的 Node.js 后端,但验证以 400 状态代码停止了请求。 我不好,我很长一段时间都没有注意到这个直率的错误。 感谢您花时间回复。
您的服务器在 5000 上运行,您正在从 3000 调用 api。更改 url 中的端口号如下
axios({
method: 'POST',
url: 'http://localhost:5000/api/user/register',
headers: {
'Content-Type': 'application/json',
},
data: registerData,
})
尝试将return res.status(400).json({"message": "Email already exists"})
改成这个res.status(400).send({"message": "Email already exists"}))
和
localhost:3000
到localhost:5000
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.