CODEWITHSUNDEEP
node.jsreactjsaxios
youssef manyalawy
youssef manyalawy

Reputation: 85

Request failed with status code 400 with axios

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 :

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;

Upvotes: 5

Views: 33838

Answers (2)

Ernesto
Ernesto

Reputation: 4272

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

   axios
      .post(
        "http://localhost:8080/staffMember/login",
        JSON.stringify({
          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

Upvotes: 1

Mubaraka Mubahood
Mubaraka Mubahood

Reputation: 239

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

Upvotes: 4

Related Questions