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

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: "Fred#gmail.com",
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

please try this
axios.post('YOUR_FULL_URL', {
username: 'api',
password: 'MY_PASSWORD',
grant_type: 'MY_GRANT_TYPE'
}, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}}).then(response => {console.log(response)})
.catch(error => {
console.log(error.response)
});

Answer 2

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: "Fred#gmail.com",
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: "Fred#gmail.com",
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