Request failed with status code 400 with axios

user_10924902 0
Viewed 12302

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 :

enter image description here

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;
axios reactjs node.js
2 Answers

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

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

user_73665260
Related