Javascript 我的数据未从react服务器到达后端节点服务器
我的Signup.js文件,从中启动请求Javascript 我的数据未从react服务器到达后端节点服务器,javascript,node.js,reactjs,express,express-validator,Javascript,Node.js,Reactjs,Express,Express Validator,我的Signup.js文件,从中启动请求 import React,{ useState } from 'react'; import isEmail from 'validator/lib/isEmail'; import isEmpty from 'validator/lib/isEmpty'; import equals from 'validator/lib/equals'; import { Link } from 'react-router-dom'; import { showEr
import React,{ useState } from 'react';
import isEmail from 'validator/lib/isEmail';
import isEmpty from 'validator/lib/isEmpty';
import equals from 'validator/lib/equals';
import { Link } from 'react-router-dom';
import { showErrMsg,showSuccessMsg } from '../Helpers/messages.js';
import { showLoading } from '../Helpers/loading';
import { signup } from '../../api/auth';
import './SignUp.css';
const SignUp = () => {
// filled this for testing purpose
const[formData,setFormData] = useState({
username: 'shivshankar',
email:'shivshankarkumar.pusa@gmail.com',
password:'1234',
password2:'1234',
successMsg:false,
errorMsg:false,
loading:false,
});
const {
username,
email,
password,
password2,
successMsg,
errorMsg,
loading,
} = formData;
const handleSubmit = (e) => {
e.preventDefault();
if(isEmpty(username) || isEmpty(email) || isEmpty(password) || isEmpty(password2)){
setFormData({
...formData,errorMsg : "All fields are Required"
})
}else if(!isEmail(email)){
setFormData({
...formData , errorMsg : "Invalid Email"
})
}else if(!equals(password,password2)){
setFormData({
...formData , errorMsg: "Passwords do not Match"
})
}else{
const { username , email , password} = formData;
const data = { username , email , password};
setFormData({
...formData,
loading : true,
})
signup(data)
.then(response => {
console.log("Axios signup success",response);
setFormData({
username:"",
email:"",
password:"",
password2:"",
loading:false,
successMsg:response.data.successMessage
})
})
.catch(err => {
console.log("Axios post error : " , err);
setFormData({...formData, loading : false});
});
}
}
axios post请求中的my auth.jjs文件正在生成
import axios from 'axios';
export const signup = async (data) => {
const config = {
headers : {
'Content-Type' : 'applicaion/json',
},
};
console.log(data);
const response = await axios.post('/api/auth/signup', data, config);
return response;
};
现在进入服务器端server.js
const express = require('express');
const app = express();
const cors = require('cors');
const morgan = require('morgan');
const connectDB = require('./database/db');
const authRoutes = require('./routes/auth');
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended : true }));
app.use(bodyParser.json());
app.use(cors());
app.use(morgan('dev'));
app.use(express.json());
app.use('/api/auth',authRoutes);
// app.post('/api/auth/signup',(req,res) => {
// console.log("inside signup");
// // res.send("api/auth/signup");
// });
connectDB();
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`listening to port ${port}`));
authRoutes的auth.js文件`
const express = require('express');
const router = express.Router();
const { signupValidator, validatorResult } = require('../middleware/validator');
router.post('/signup', signupValidator, validatorResult);
module.exports = router;
myvalidator.js文件
const { check, validationResult } = require('express-validator');
exports.signupValidator = [
check('username').not().isEmpty().trim().withMessage('All fields are required'),
check('email').isEmail().normalizeEmail().withMessage('Invalid Email'),
check('password').isLength({ min : 6 }).withMessage('Password must be 6 character long'),
];
exports.validatorResult = (req, res, next) => {
// console.log("request body" ,req.body);
const result = validationResult(req);
const hasErrors = !result.isEmpty();
// console.log(result);
if(hasErrors){
const firstError = result.array()[0].msg;
console.log("has errors",hasErrors);
console.log("result",result);
return res.status(400).json({
message : firstError,
});
}
next();
};
数据正在从前端axios发送,但数据没有到达后端节点服务器
当我console.log(req.body)
或console.log(data)
时,它说未定义
我被困在这里,有人能帮我吗??
在控制台中获取此输出
[0] result Result {
[0] formatter: [Function: formatter],
[0] errors:
[0] [ { value: undefined,
[0] msg: 'All fields are required',
[0] param: 'username',
[0] location: 'body' },
[0] { value: undefined,
[0] msg: 'Invalid Email',
[0] param: 'email',
[0] location: 'body' },
[0] { value: undefined,
[0] msg: 'Password must be 6 character long',
[0] param: 'password',
[0] location: 'body' } ] }
[0] POST /api/auth/signup 400 34.535 ms - 37
您需要
在应用程序之后要求路由。使用(bodyParser.json())代码>语句
所以moveconst authrouts=require('./routes/auth')使用(bodyParser.json())
您的auth.js文件中有一个输入错误,您设置的内容类型标题不正确,应该是application/json
&而不是application/json
import axios from 'axios';
export const signup = async (data) => {
const config = {
headers : {
'Content-Type' : 'application/json', //this should be application/json
},
};
console.log(data);
const response = await axios.post('/api/auth/signup', data, config);
return response;
};
我添加了它,但仍然没有定义。我想我现在得到了正确的答案。看我更新的答案。我也尝试了,仍然没有得到数据,我不明白为什么数据不是来自前端。你从前端的`auth.js`中的控制台.log(data)
得到了什么?我添加了一张图片,请检查,谢谢,这是一个愚蠢的错误。现在工作很好。再次感谢