node.js - Request failed with status code 400 with axios

Question

I am trying to use the login 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:

   axios
      .post(
        "http://localhost:8080/staffMember/login",
        {
          email: "[email protected]",
          password: "Flintstone",
        },
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      )
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error.message);
      });
  };

And this is my login page and console :

This is my backend configuration:

require("dotenv").config();
const mongoose = require("mongoose");
const express = require("express");
const app = express();
const staffMember = require("./routers/staffMember.router.js");
const hrMember = require("./routers/hrMember.router.js");
const academicMember = require("./routers/academic members/academicMember.router");
const headOfDepartment = require("./routers/academic members/headOfDepartment.router");
const courseInstructor = require("./routers/academic members/courseInstructor.router");
const courseCoordinator = require("./routers/academic members/courseCoordinator.router");
var cors = require("cors");
app.use(cors());

mongoose
  .connect(process.env.DATABASE_CONN_STRING, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
    useCreateIndex: true,
  })
  .then(() => {
    console.log("DB connected");
  })
  .catch(() => {
    console.log("DB connection failed");
  });

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use("/staffMember", staffMember);
app.use("/hrMember", hrMember);
app.use("/academicMember", academicMember);
app.use("/courseInstructor", courseInstructor);
app.use("/courseCoordinator", courseCoordinator);
app.use("/headOfDepartment", headOfDepartment);

module.exports = app;

Answer 1

well, I do not know how is the backend configured, but you could start by stringyfing yow body

   axios
      .post(
        "http://localhost:8080/staffMember/login",
        JSON.strinfify({
          email: "[email protected]",
          password: "Flintstone",
        }),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      )
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error.message);
      });
  };

If that does not do any change, then change the header instead

   axios
      .post(
        "http://localhost:8080/staffMember/login",
        {
          email: "[email protected]",
          password: "Flintstone",
        },
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }
      )
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error.message);
      });
  };

lil commercial If you want to b'cum a master with axios checkout https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a

or npm i -S axios-es6-class