CODEWITHSUNDEEP
node.jsreactjs
Loganathan R P
Loganathan R P

Reputation: 103

400 Bad request while fetching data in post call

I am running my React js web app in one port 3000. For node server I am using 4000.

While calling fetch method it returns `400 Bad request'. Error POST http://localhost:4006/auth/admin 400 (Bad Request)

react code npm started in 3000 port

fetch('http://localhost:4000/auth/admin',
    { mode: 'no-cors',
      method: "POST",
      body: JSON.stringify({
        username:"admin",
        password:"1234"
      }),
      headers: {
        "Content-Type": "application/json",
        'Accept': 'application/json, text/plain, */*',
        credentials: "omit", //
        // "Content-Type": "application/x-www-form-urlencoded",
    },
    })
    .then((response) => console.log(response));

node code running in 4000 port

const passport = require("passport");
const route = require("../constants/routeStrings");
const keys = require("../config/keys");
const processStatus = require("../constants/processStatus");

const success = {
  status: processStatus.SUCCESS
};

const failute = {
  status: processStatus.FAILURE
};

module.exports = app => {
  app.post('/auth/admin', passport.authenticate("local"), (req, res) => {
    res.send(success);
  });

};

Upvotes: 5

Views: 15962

Answers (3)

Sachin Gupta
Sachin Gupta

Reputation: 5301

Do not stringify the body. Change from

body: JSON.stringify({
  username:"admin",
  password:"1234"
}),

to

body: {
  username:"admin",
  password:"1234"
},

Upvotes: 4

Subarata Talukder
Subarata Talukder

Reputation: 6281

I suffered long hours, but I overcame it throw writing those lines of code blocks. I successfully send the request to the server's controller, hopefully yours: make it try.

First define a async function to make POST request:

async function _postData(url = '', data = {}) {
    const response = await fetch(url, {
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'same-origin',
        redirect: 'follow',
        referrerPolicy: 'no-referrer',
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        },
        body: JSON.stringify(data)
    });
    
    return response.json();
}

Now create a request JSON payload:

let requestPayload = {
            propertyName1: 'property value1',
            propertyName2: 'property value23',
            propertyName3: 'property value',
            So on
           }

Note: Request model will be your desired model, what request payload you actually send.

Now make a request using this payload including your end point URL:

_postData('http://servername/example', requestPayload )
            .then(json => {
                console.log(json) // Handle success
            })
            .catch(err => {
                console.log(err) // Handle errors
            });

100% worked on my project.

Upvotes: 0

noitse
noitse

Reputation: 1045

The 400 response is raised by passport since it is unable to read your params. You need to tell your "node" app to parse them before your actual routes.

// Import body parser, you should read about this on their git to understand it fully
const parser = require('body-parser');
const urlencodedParser = parser.urlencoded({extended : false});

// before your routes
app.use(parser .json());
app.use(urlencodedParser) // This will parse your body and make it available for your routes to use

Then do your other calls.

Also, make sure that you are sending username and password keys, otherwise read the documentation on how to change these key names to something else

Upvotes: 0

Related Questions