Unable to POST data in axios

[awais-ilyas]

I am using this code to POST the data to Web API
var param = {
args: {
myStringVal: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3'
}
};

axios({
method: 'post',
url: 'api/Application/Action/MyWebAPIMethod',
data: JSON.stringify(param),
});

and my Web API code is like this:
public class MyClassVM
{
public string myStringVal { get; set; }
}
public MessageVM MyWebAPIMethod(MyClassVM args){
// my code goes here
}

Issue is: When I pass the myStringVal: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3' it gives me null in Web API [args.myStringVal = null ].

How can I pass the values in axios POST.

Thanks in advance

[at88mph]

@awais-ilyas , I don't think you would normally stringify the POST payload. Try this:

...
axios({
method: 'post',
url: 'api/Application/Action/MyWebAPIMethod',
data: args,
});
...

Which should set the data in the POST body.

[dlgoodchild]

I've recently started moving from using jQuery for AJAX work to Axios, just because it seems to be all the rage. But I was shocked to learn I can't do a simple POST.

So, here's what I first tried:

axios.post('/api/event/item', {
    event_id: eventId,
    item_id: itemId,
    description: description
  })
  .catch(function (error) {
    console.log(error);
  });

On the backend (using PHP) $_POST was completely empty. So I did some googling, and this works (with the use of a polyfill, sigh):

const params = new URLSearchParams();
params.append('event_id', eventId);
params.append('item_id', itemId);
params.append('description', description);
axios({
  method: 'post',
  url: '/api/event/item',
  data: params
});

This works. So I need to use URLSearchParams? Well this was frustrating because the docs show that the first method should work.

Anyone else having this trouble?

[at88mph]

@dlgoodchild Are you trying to send it as Form data? I found my POST body was empty too, but I had to use this to transform it into something Form-like:

   ...
      data: params,
      transformRequest: [
        function(data, headers) {
          const serializedData = []

          for (const k in data) {
            if (data[k]) {
              serializedData.push(`${k}=${encodeURIComponent(data[k])}`)
            }
          }

          return serializedData.join('&')
        }
      ],
   ...

Agreed, the POST functionality needs work.

[dlgoodchild]

Ahh good approach! For the benefits of anyone landing here, in the end I got it working using in 3 variants:

1. FormData
2. URLSearchParams
3. querystring.stringify (part of Node)

The problem with the first 2 options is browser compatibility (check with caniuse.com). The last is another depdendency.

I wasn't aware of the transformRequest option, this looks good and is a great option if you want minimise dependencies and work cross browser particularly for older versions.

I think the documentation is what makes Axios frustrating for many people. The number of StackOverflow questions relating to POST using Axios is a good indication there's a problem somewhere and general misunderstanding.

[yuri-wisestamp]

Have the same problem - spent few hours on research, finally found this issue. Thoughts: POST shouldn't be complicated, and shouldn't require dependencies or extra configuration. This feels like AngularJS 1 all over again. I'll pass on using this library for now.

[dlgoodchild]

@yuri-wisestamp couldn't agree more, it's a very odd/unusal design choice. I've mostly stopped using it now as I felt spurned by the hours I lost debugging it due to lack of good documentation to lay this out from the outset.

[Antoinebr]

Post with Axios and PHP is a true nightmare !

I spent two hours, without getting any result...

[richgoldmd]

Non-form-encoded posts do not populate $_POST in PHP. You have to read the post body:

$body = file_get_contents('php://input');

if you expect json:

$json=json_decode($body);

This code:

axios = require('axios');

var param = {
   args: {
      myStringVal: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3'
   }
};

axios({
   method: 'post',
   url: 'http://home.test/post.php',
   data: param,
});

Against this in the server:

<?php

$entityBody = file_get_contents('php://input');

file_put_contents(__DIR__ . '/output.txt', print_r(json_decode($entityBody), true));

Produced this output:

stdClass Object
(
    [args] => stdClass Object
        (
            [myStringVal] => 979251e4-6c9f-460d-ba32-1b6fe58ce8a3
        )

)

[Antoinebr]

I fixed my issue like that :

Front

✋userSearchParams() doesn't work everywhere ( https://caniuse.com/#search=URLSearchParams() )

        let params = new URLSearchParams();
        params.append('email', this.email );
        params.append('url', userInfo.url );
        this.$http.post(
          'http://localhost:9999/api/record.php', params
          )
        .then((response) => {
          if (response.data.message === "success" )  this.$router.push( 'thankyou' );
        })
        .catch( (error) =>   console.log(error) ) ;

Back

print_r( $_POST ); 

// $_POST['email'] = 'lol@google.fr'
// $_POST['url'] = 'http://google.fr'

[Legym]

I got mine to work by installing qs.

          import qs from "qs";


        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

        axios.post("DOMAIN/event/new", qs.stringify(params))
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });

[ArmandoHerra]

@Legym Thanks! I got mine working as well with qs.stringify! Damn I was about to stop using axios since I could not get my POST requests to work correctly!

Many thanks!

[Legym]

I actually found a better solution without the need for an external library. The Post request Header is set to form. You'll need to change the header if you are sending a JSON object

        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

axios.post('DOMAIN/event/new', params, {
     headers: {
          'content-type': 'application/json',
     },
})

[transient-ad]

@Legym Thank you very much!

[justin-m-lacy]

I really don't understand why POST doesn't work. Legym's headers don't fix it for me.
jquery worked first try so i dont know what's going on.