Request failed with status code 500 with axios

Question

I am trying to use the register API I made using node, however, whenever I call the API using Axios, it gives me a request failed in the console.

This is how I use axios to call my method in my server.js file:

const express = require("express");
const { Sequelize } = require("sequelize");
const cors = require("cors");
const { User } = require("./models");
const ejs = require("ejs");
const sequelize = new Sequelize(
  "postgres://postgres@localhost:5432/plantApp_database"
);

const app = express();
const PORT = 3001;

app.use(cors());
app.use(express.json());
app.set("view engine", "ejs");


app.post("/api/register", async (req, res) => {
    await User.create({
        userName: req.body.userName,
        email: req.body.email,
    })
    let newUser = await User.findAll({
        where: {
            userName: req.body.userName,
            email: req.body.email,
        }
    })
      .catch((err) => res.status(400).json(err));
      res.send(newUser)
  });


app.listen(3001, () => {
  console.log(`Plant server listening on port ${PORT}!`);
});

The error I get in the console:

enter image description here

The error I get in the terminal:

enter image description here

Any help would be much appreciated! Thank you!!

Code in register file:

import React, { useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import "./Register.css";

const Register = () => {
  const [usernameReg, setUsenameReg] = useState("");
  const [emailReg, setEmailReg] = useState("");

  const registerData = (value) => {
    console.log(value.username.value)
    axios.post("/api/register", {
      username: value.username.value,
      email: value.email.value,
    }).then((response) => {
      console.log(response);
    });
  };

  return (
    <div className="auth">
      <h1>Sign up</h1>
      <form onSubmit={(e) => {
        console.log(e)
            e.preventDefault();registerData(e.target);
        }}>
        <input name="username" required type="text" placeholder="Username" />
        <input
          type="text"
          onChange={(e) => {
            setUsenameReg(e.target.value);
          }}
          placeholder="Full name"
        />
        <input name="email"
          onChange={(e) => {
            setEmailReg(e.target.value);
          }}
          required
          type="email"
          placeholder="Email"
        />
        <input required type="password" placeholder="Password" />
        <button type="submit">
        Sign up</button>
        <p>The email or password you enter is not valid!</p>
        <span>
          Already have an account? <Link to="/login">Login!</Link>
        </span>
      </form>
    </div>
  );
};

export default Register;

Answer 1

500 Error is Internal Server Error so you have to check backend. Use body-parser module to get values from req.body

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' }))

// parse some custom thing into a Buffer
app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }))

// parse an HTML body into a string
app.use(bodyParser.text({ type: 'text/html' }))