从React调用node.js函数时出现400错误。

问题描述 投票:0回答:2

我试图用axios从react前台调用一些寄存器到我的node.js后台,但我得到了一个400错误说。

http:/localhost:9000userregister......。 400(不良请求)

下面是我的代码。

import React, { useState } from 'react'
import TutorialDataService from "../../services/TutorialService";
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
        };
        TutorialDataService.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

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



module.exports = router;

然后在我的app.js(node)里是这样的:

const authRoute = require('./routes/auth');

app.use('/user', authRoute);

Validation.js (node)

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

http-common.js。

import axios from "axios"

export default axios.create({
  baseURL: "http://localhost:9000",
  headers: {
    "Content-type": "application/json"
  }
});

service.js:

import http from "../http-common";

const signUp = data => {
  return http.post('/user/register', data);
};

你看到问题了吗?

javascript node.js reactjs fetch react-hooks
2个回答
0
投票

在前端,你是从 "userregister "中获取的,但在node的auth文件中的帖子只是 "register"。试试让它们匹配。


0
投票

你必须把 router.get 而不是 router.post

© www.soinside.com 2019 - 2024. All rights reserved.