我的数据没有从React Server到达后端节点服务器

问题描述

从请求发起的

我的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:'[e-mail]',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,password} = formData; 
            const data = { username,password};
            setFormData({
                ...formData,loading : true,})

            signup(data)
                .then(response => {
                    console.log("Axios signup success",response);
                    setFormData({
                        username:"",email:"",password:"",password2:"",successMsg:response.data.successMessage
                    })
                })
                .catch(err => {
                    console.log("Axios post error : ",err);
                    setFormData({...formData,loading : false});
                });
        }
    }

axios发布请求中的我的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;

我的validateator.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]        msg: 'Password must be 6 character long',[0]        param: 'password',[0]        location: 'body' } ] }
[0] POST /api/auth/signup 400 34.535 ms - 37

解决方法

您的auth.js文件中有错字，您对Content-Type标头的设置不正确，应该为application/json而不是applicaion/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;
};

,

在require语句之后，您需要app.use(bodyParser.json());路线

因此将const authRoutes = require('./routes/auth');移到app.use(bodyParser.json());之后