[英]Calling function react to node js error 400
i try to call some register from react front to my node.js back using axios but i got a 400 error saying:我尝试使用 axios 从反应前端调用一些寄存器到我的 node.js 回来,但我收到 400 错误说:
POST http://localhost:9000/user/register 400 (Bad Request) but i don't see where the issue the data i send to the server. POST http://localhost:9000/user/register 400(错误请求)但我看不到我发送到服务器的数据的问题所在。
Error: Request failed with status code 400
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)
Here my code:这是我的代码:
import React, { useState } from 'react'
import Service from "../../services/Service";
import { Link } from 'react-router-dom';
const Register = () => {
const user = {
name: '',
email: '',
password: '',
confirmPassword: '',
}
const [userData, setUserData] = useState(user);
const [error, setError] = useState('');
const [submitted, setSubmitted] = useState(false);
const handleChange = e => {
setUserData({ ...userData, [e.target.id]: e.target.value })
}
const saveUser = e => {
e.preventDefault();
const data = {
name: user.name,
email: user.email,
password: user.password
};
Service.signUp(data)
.then(response => {
setUserData({
name: response.data.name,
email: response.data.email,
password: response.data.password
})
setSubmitted(true);
console.log(userData)
})
.catch(error => {
setError(error);
console.log(error);
})
}
const newUser = () => {
setUserData(user);
setSubmitted(false);
}
const { name, email, password, confirmPassword } = userData;
const btn = name === '' || email === '' || password === '' || password !== confirmPassword
? <button disabled>Inscription</button> : <button>Inscription</button>
// gestion erreurs
const errorMsg = error !== '' && <span>{error.message}</span>
return (
<div className="signUpLoginBox">
<div className="slContainer">
<div className="">
<div className="formContent">
<form onSubmit={saveUser}>
{errorMsg}
<h2>Inscription</h2>
<div className="inputBox">
<input type="text" id="name" onChange={handleChange} value={name} autoComplete="off" />
<label htmlFor="pseudo">Name</label>
</div>
<div className="inputBox">
<input type="email" id="email" onChange={handleChange} value={email} autoComplete="off" required />
<label htmlFor="email">Email</label>
</div>
<div className="inputBox">
<input type="password" id="password" onChange={handleChange} value={password} autoComplete="off" required />
<label htmlFor="password">Mot de passe</label>
</div>
<div className="inputBox">
<input type="password" id="confirmPassword" onChange={handleChange} value={confirmPassword} autoComplete="off" required />
<label htmlFor="confirmPassword">Confirmez le mot de passe</label>
</div>
{btn}
</form>
<div className="linkContainer">
<Link className="simpleLink" to="/login">Déjà inscrit? Connectez-vous </Link>
</div>
</div>
</div>
</div>
</div>
);
};
export default Register
my auth file node.js:我的身份验证文件 node.js:
const router = require('express').Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');
const { registerValidation, loginValidation } = require('./validation');
router.post('/register', async (req, res) => {
//LETS VALIDATE THE DATA BEFORE WE A USER
const {error} = registerValidation(req.body);
if (error) return res.status(400).send(error.details[0].message);
//Checking if the user is already in the database
const emailExist = await User.findOne({email: req.body.email})
if(emailExist) return res.status(400).send('Email already exists');
//Hash passwords
const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(req.body.password, salt);
//Create 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);
}
});
and then in my app.js (node) is like:然后在我的 app.js(节点)中是这样的:
const createError = require('http-errors');
const express = require('express');
const dotenv = require('dotenv');
const mongoose = require('mongoose');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const cors = require('cors');
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const testAPIRouter = require('./routes/testAPI');
const disneyCharacterRouter = require('./routes/disneyCharacter');
const authRoute = require('./routes/auth');
const postRoute = require('./routes/posts');
const app = express();
dotenv.config();
//Connect to DB
mongoose.connect(process.env.DB_CONNECT, { useNewUrlParser: true }, () =>
console.log('connected to DB!')
);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//Route Middleware
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/testAPI', testAPIRouter);
app.use('/disneyCharacter', disneyCharacterRouter);
app.use('/user', authRoute);
app.use('/posts', postRoute);
the Validation.js (node): Validation.js(节点):
const Joi = require('@hapi/joi');
//Register Validation
const registerValidation = (data) => {
const schema = Joi.object({
name: Joi.string()
.min(6)
.required(),
email: Joi.string()
.min(6)
.required()
.email(),
password: Joi.string()
.min(6)
.required()
});
return schema.validate(data);
};
the http-common.js file: http-common.js 文件:
import axios from "axios"
export default axios.create({
baseURL: "http://localhost:9000",
headers: {
"Content-type": "application/json"
}
});
service.js:服务.js:
import http from "../http-common";
const signUp = data => {
return http.post('/user/register', data);
};
Do you see the problem?你看到问题了吗?
ok i find a solution i don't really know why but my function handleChange:好的,我找到了一个解决方案,我真的不知道为什么,但是我的 function handleChange:
const handleChange = e => {
setUserData({ ...userData, [e.target.id]: e.target.value })
}
wasn't do nothing, so i change it like that:不是什么都不做,所以我像这样改变它:
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const saveUser = e => {
e.preventDefault();
const data = {
name: name,
email: email,
password: password
};
fetch('http://localhost:9000/user/register', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
})
console.log(JSON.stringify(data));
}
you can write like that to keep the axios version:你可以这样写来保留 axios 版本:
const saveUser = e => {
e.preventDefault();
const data = {
name: name,
email: email,
password: password
};
Service.signUp(JSON.stringify(data))
.then(
setSubmitted(true),
console.log(JSON.stringify(data))
)
.catch(error => {
setError(error);
console.log(error);
})
}
and the form:和形式:
<div className="inputBox">
<input type="text" id="name" name="name" onChange={e => setName(e.target.value)} value={name} autoComplete="off" />
<label htmlFor="pseudo">Name</label>
</div>
<div className="inputBox">
<input type="email" id="email" name="" onChange={e => setEmail(e.target.value)} value={email} autoComplete="off" required />
<label htmlFor="email">Email</label>
</div>
<div className="inputBox">
<input type="password" id="password" onChange={e => setPassword(e.target.value)} value={password} autoComplete="off" required />
<label htmlFor="password">Mot de passe</label>
</div>
<div className="inputBox">
<input type="password" id="confirmPassword" onChange={e => setConfirmPassword(e.target.value)} value={confirmPassword} autoComplete="off" required />
<label htmlFor="confirmPassword">Confirmez le mot de passe</label>
</div>
and it's work.这是工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.