Axios POST params show empty on server - using MERN stack

Question

I want to update a document in Mongo, but when I send an Axios POST request to the server with params for the updates I receive nothing but a blank object on the server side - I'm using Node.js with an Express server (MERN stack).

I have tried the qs library module and Node's querystring module. I tried including headers with 'Content-Type': 'application/x-www-form-urlencoded' and 'application/json'.

My Axios POST request:

const A = 1;
const B = 2;
const data = { A, B };
console.log(qs.stringify(data));                 // A=1&B=2
axios.post(url('upVote'), qs.stringify(data));

The server route:

app.post('/upVote', async (req, res) => {
  console.log(req.params);                       // {}
  await DB.updateVote(ID, collection, voteCount);
  res.end();
});

The headers as shown by Chrome's DevTools.

... Also, all my axios.get() requests work fine and grab data from Mongo and send it back to my app properly, and the url/endpoints match.

I think here you don't get a blank object. You get nothing. like content : 0. Have you tried the server logs ? — trk, Sep 25 '18 at 18:13

Rajan Lagah · Answer 1 · 2018-09-25T18:30:57.213

I think you want .body instead of .params.As you are sending data in body by post using axios. You are printing params which will print nothing for this url/api .
Try

console.log(req.body) // instead of req.params

If this did not work then please show us your react code.
Moreover In react you have to add .then() after axios else it will say unhanded promise

To get params on server side you have to make some changes
In axios (react)

axios.post(url('upVote/param'), qs.stringify(data));

In server

app.post('/upVote/:params', async (req, res) => {
 console.log(req.params)
 .....
})

Vlad Kolbaia · Accepted Answer · 2018-09-26T08:06:07.347

There are a couple of ways to send data to the server with axios. I see the confusion with the documentation in axios, I have not seen this usage before and it does seem to be broken upon looking at the request logs and object.

1) axios.post receives body of the request as a second parameter. So if you want to pass parameters to axios, you should do something like this:

const B = 2;
const data = { A: 1, B: 1 };

axios.post(url('upVote'), {}, { params: data });

Note that axios will handle stringification on it's own and that the third parameter is a config object.

On the server the params will be available at request.query

2) If you want to stringify the parameters yourself, then you should append them into your URL like so

axios.post(`url('upVote')?${qs.stringify(data)}`);

Same here, data on the server will be under request.query

3) It's generally better to use the body of the post request to transfer large data payloads for convenience. You should also consider what your caching strategies are and if they rely on request url without the consideration of request body it may be a concern.

axios.post(url('upVote'), data);

In this case data on the server will be under request.body

UPD: Originally forgot to mention that you will need a body-parser middleware to access request.body.

4) You can use axios without method shorthands which may be useful for some people

axios({
  method: 'POST',
  url: url('upVote'),
  params: data
})

This is identical to the example in 1.
And all of them return a Promise which you can .then().catch() or await.

Thank you! this cleared up a bit for me and it worked. Using your example 1 i was able to access the data on the server from req.query... Now I'm confused though because I also tried your example 3 and I wasn't able to pass the data on the body parameter.. req.body is undefined — MarlyMarMar, Sep 25 '18 at 23:01
nevermind me!! i forgot body-parser for express... thank you! — MarlyMarMar, Sep 25 '18 at 23:14
Yep, glad it helped. Updated the answer with mention of `body-parser` just in case. — Vlad Kolbaia, Sep 26 '18 at 08:06

score 0 · Answer 3 · answered Sep 25 '18 at 18:38

0

I think you are calling res.end(). I think it should be res.send(...)

This answer should help: https://stackoverflow.com/a/29555444/1971378

answered Sep 25 '18 at 18:38

trk

2,106
14
20

Axios POST params show empty on server - using MERN stack

3 Answers3