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

Question

我的 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});
                });
        }
    }

我的 auth.jjs 来自 axios post 请求的文件正在生成

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}`));

auth.js authRoutes 文件`

const express = require('express');
const router = express.Router();
const { signupValidator, validatorResult } = require('../middleware/validator');


router.post('/signup', signupValidator, validatorResult);



module.exports = router;

我的validator.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) 它说 undefined.

我卡在这里了，谁能帮帮我？？在控制台中获取此输出。

[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

Answer 1

您需要 require 您的 app.use(bodyParser.json()); 语句后的路由

所以将const authRoutes = require('./routes/auth');移动到app.use(bodyParser.json());

之后

Answer 2

您的 auth.js 文件中有错字，您设置的 Content-Type headers 不正确，应该是 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;
};

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

My data not reaching to the backend node server from react server

javascript

node.js

reactjs

express

express-validator