axios post data as form data instead of as JSON in payload

Question

I am just trying my first reactJS app.

In that I am using axios.post() method for sending data.

submitHandler = event => {
  event.preventDefault();
  axios
    .post("http://demo.com/api/v1/end-user/login", {
      username: "",
      password: "",
      user_type: 1
    })
    .then(res => {
      console.log(res);
      console.log(res.data);
    });
}

But when I check into my network tab, data which I am sending along with request is seems to be in payload.

I would like to send the data as form data instead. Am I am missing something?

The second argument is supposed to be stringified to JSON and used as the request payload. Is that not what you want? — Tholle, Apr 11 '19 at 11:09

score 7 · Accepted Answer · answered Apr 11 '19 at 11:16

If you want to send the data as form data instead of as JSON in the payload, you can create a FormData object and use that as second argument instead.

submitHandler = event => {
  event.preventDefault();

  const formData = new FormData();
  formData.append("username", "");
  formData.append("password", "");
  formData.append("user_type", 1);

  axios.post("http://demo.com/api/v1/end-user/login", formData).then(res => {
    console.log(res);
    console.log(res.data);
  });
};

In node.js (not the browser) you can import `FormData` from the [`form-data` npm module](https://www.npmjs.com/package/form-data). — luckydonald, Nov 11 '21 at 00:37

Deepak · Answer 2 · 2020-09-10T11:53:40.510

1

You can do this in axios by using FormData() like

var body = new FormData();
body.append('userName', 'test');
body.append('password', 'test');
body.append('user_type', 1);

And then you can use axios post method (You can amend it accordingly)

axios({
    method: 'post',
    url: 'http://demo.com/api/v1/end-user/login',
    data: body,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

edited Sep 10 '20 at 11:53

answered Apr 11 '19 at 11:23

Deepak

1,303
2
9
30

No need to explicitly specify headers – Anurag Srivastava Oct 23 '20 at 09:03
Your second part is just copied from here: https://stackoverflow.com/a/47630754/16085086 – gaout5 Feb 15 '22 at 17:48

score 0 · Answer 3 · answered Feb 10 '22 at 01:14

What worked for me is to send the form trough params: instead of data:

That way it will be send as GET variables instead of Request Payload and is much easier to read with $_GET in PHP. No idea how to send as post

axios({
    method: 'post',
    params: data,
    url: 'api.php',
  })
  .then((res) => {
    //Perform Success Action
  })
  .catch((error) => {
    // error.response.status Check status code
  }).finally(() => {
    //Perform action in always
  });

axios post data as form data instead of as JSON in payload

3 Answers3