我将Axios与React一起使用，以对我的Nodejs服务器使用POST方法。我第一次尝试它给我关于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上
反应-在端口3000上运行
我有一些其他用PHP编写的功能-在端口8000上运行
在这里，当我将React Axios与PHP结合使用时，在满足CORS策略后，它可以正常工作。但是当我对Node.js进行操作时，出现此错误。当我尝试使用POSTMAN时，Nodejs Auth代码可以正常工作。
这是我的React代码，该代码在端口3000上运行
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上运行的我的Node.js代码：（我的所有路由都具有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;
答案 0 :(得分：0)
您的服务器运行在5000上，而您正在从3000调用api。请按如下所示更改url中的端口号
axios({
method: 'POST',
url: 'http://localhost:5000/api/user/register',
headers: {
'Content-Type': 'application/json',
},
data: registerData,
})
答案 1 :(得分：-1)
尝试更改
return res.status(400).json({"message" : "Email already exists"})对此
res.status(400).send({"message" : "Email already exists"}))
和
localhost:3000至localhost:5000