Javascript 我的数据未从react服务器到达后端节点服务器

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

我的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 { 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())语句


所以move
const authrouts=require('./routes/auth')

您的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)
得到了什么?我添加了一张图片,请检查,谢谢,这是一个愚蠢的错误。现在工作很好。再次感谢