Getting an empty request body even when using a body parsing middleware

Question

I'm trying to implement this little login system of mine, and I have a form that sends a post request to my webpack dev server, which in turn proxies the request to my server.

This is the function that handles the form submit and sends a POST request to the server.

handleSubmit = (e) => {
  e.preventDefault();
  this.props.form.validateFields((err, values) => {
    if (!err) {
      console.log('Received values of form: ', values);
      fetch('/login', {
        method: 'POST',
        body: values
      });
    }
  });
}

When I click Login, I do get my values logged in the console as shown here http://prntscr.com/hsbpyp

This is the server side code which handles the login endpoint

const app = express();

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

app.post('/login', (req, res) => {
  console.log('Got user information: \n', req.body);
  res.send('asd');
})

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));

app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));



app.listen(3001, () => {
  console.log(`
    =====
    Server running at http://localhost:3001/
    GraphiQL running at http://localhost:3001/graphiql/
    =====
  `)
})

As you can see, I'm indeed using the body-parser middleware to parse the req.body but when I attempt to log the body, I get an empty object http://prntscr.com/hsbqrd

Can someone help me figure out what is going on with my code?

Yes, I did provide you the screenshot of that in the question — buoyantair, Dec 26 '17 at 07:40
not that..in your request.that your sending..chrome networks? — zabusa, Dec 26 '17 at 07:54
@zabusa yeah, it does contain the payload, Check this out http://prntscr.com/hsbxh4 — buoyantair, Dec 26 '17 at 07:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161958/discussion-between-buoyantair-and-zabusa). — buoyantair, Dec 26 '17 at 09:06

Sparw · Answer 1 · 2017-12-26T10:21:35.577

0

Maybe on your client side, you should try with this method ?

var values = {
    username: 'test',
    password: 'test'
};

fetch("/login", {
   method: "POST",
   headers: {
     'Accept': 'application/json, text/plain, */*',
     'Content-Type': 'application/json'
   },
   body: JSON.stringify(values)
});

More information here : Fetch Post JSON data

EDIT

I think you also have to configure bodyParser with json data like this :

app.use(bodyParser.json({limit: '200mb'}));

Hope it helps.

edited Dec 26 '17 at 10:21

answered Dec 26 '17 at 07:44

Sparw

2,688
1
15
34

Will try and get back to ya – buoyantair Dec 26 '17 at 07:46
If you are sending the request as JSON then you will need to add the bodyParser.json() to your login route handler also. – Faz Dec 26 '17 at 09:23
@buoyantair : Can you try with bodyParser.json, like on my edit ? – Sparw Dec 26 '17 at 10:22

score 0 · Answer 2 · answered Dec 26 '17 at 08:23

Try this ajax request with adding JQuery script, I ran your server and the problem was the request not the server, I'm not that good with HTML requests I even tried the MDN examples but they didn't work, this code worked well with your server:

$.post("/login",
{
    name: "name",
    pass: "password"
},
function(data, status){
    console.log(data)
    console.log(status)
});

and this is the script you need:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

I'm using ReactJS so I don't want to include jquery in this. — buoyantair, Dec 26 '17 at 08:54

Faz · Accepted Answer · 2017-12-26T09:17:52.770

0

The request is being sent to the server as multipart/form-data. body-parser does not support multipart/form-data. If indeed you require the POST request to be in this format then have a look at multer or formidable.

edited Dec 26 '17 at 09:17

answered Dec 26 '17 at 09:08

Faz

360
3
11

How do you know if it's a multipart/form-data ? – buoyantair Dec 26 '17 at 10:19
The screenshot that you show here http://prntscr.com/hsbxh4 suggests it is multipart/form-data. If you inspect or output the Content-Type request header you will see the format it is being sent as. You can build the request body yourself as json and send as json in which case you will need to add the bodyParser.json() to the login route handler. Or modify your form to submit as urlencoded which is the body-parser you are currently attempting with. – Faz Dec 26 '17 at 10:58
Sorry for the delay, I'll look into this. Thank you – buoyantair Dec 26 '17 at 12:12

Getting an empty request body even when using a body parsing middleware

3 Answers3