Axios POST Request Unexpected Data Format

Question

I'm busy testing the Axios plugin for Node.JS and I'm having some difficulty with POST Request.

For testing I have a Basic PHP script

// Identify GET Request
if(!empty($_GET)) {
   $type = "Req Type : GET";
   $params = $_GET;
   $array = $_GET["array"];
   $arrayVerify = gettype($array);
}

// Identify POST Request
if(!empty($_POST)) {
   $type = "Req Type : POST";
   $params = $_POST;
   $array = $_POST["array"];
   $arrayVerify = gettype($array);
}

$response = new stdClass();
$response->type = $type;
$response->array = $array;
$response->arrayVerify = $arrayVerify;
echo json_encode($response);
exit();

As an initial test I am using JQuery Ajax as follows

data = {};
data.array = ["One", "Two", "Three"];
$.ajax ({
   url      : "url_goes_here",
   type     : "POST",
   dataType : "json",
   data     : data,
   success  : function(res) { console.log(JSON.stringify(res)); },
   error    : function(res) { abandonAllHope(); }
});

I get the following output

{"type":"Req Type : POST","array":["One","Two","Three"],"arrayVerify":"array"}

Which looks like well formed JSON, the array is still an array and PHP identified it as an array which is good

Then when I try with Axios from Node.js

var axios = require("axios");
var data = new URLSearchParams();
data.append("array", ["One", "Two", "Three"]);
axios ({
   url     : "url_goes_here",
   method  : "POST",
   data    : data
})
.then(function(res) { console.log(JSON.stringify(res.data)); })
.catch(function(res) { abandonAllHope(); });

I get the following output

{"type":"Req Type : POST","array":"One,Two,Three","arrayVerify":"string"}

The array seems to just be a concatenation of the values and PHP identified it as a string

The JQuery seemed to do what I expected but the Axios didn't, why is that? How do I tell Axios to use the data as JSON?

UPDATE

I did also try as follows

var axios = require("axios");
var data = {};
data.array = ["One", "Two", "Three"];
axios ({
   url     : lv_url,
   method  : "POST",
   data    : JSON.stringify(data)
})
.then(function(res) { console.log(JSON.stringify(res.data)); })
.catch(function(res) { });
return;

Which gave me NULLs

{"type":"Req Type : POST","array":null,"arrayVerify":"NULL"}

And I also tried as

var axios = require("axios");
var data = {};
data.array = ["One", "Two", "Three"];
axios ({
   url     : lv_url,
   method  : "POST",
   params  : data
})
.then(function(res) { console.log(JSON.stringify(res.data)); })
.catch(function(res) { });
return;

Which gave me everything right except it's a GET request now?

{"type":"Req Type : GET","array":["One","Two","Three"],"arrayVerify":"array"}

URLSearchParams does not support arrays. IF you need a proper JSON - build your data as regular JavaScript Object and then use `JSON.stringify(data)` — IVO GELOV, Jun 18 '20 at 16:31
I did try that but it came through as NULLs, I will update the question to show how I tried, maybe I did it wrong — TheLovelySausage, Jun 18 '20 at 16:34
Use the `data = {}` option, then in PHP side use `var_dump(file_get_contents("php://input"));` to see the contents of this post request. — Felippe Duarte, Jun 18 '20 at 16:45
That gave me *"string(31) \"{\"array\":[\"One\",\"Two\",\"Three\"]}\"\nnull"* — TheLovelySausage, Jun 18 '20 at 16:49
Perfect, then use `json_decode(file_get_contents("php://input"));` instead of use $_POST — Felippe Duarte, Jun 18 '20 at 16:50
More here https://stackoverflow.com/questions/8893574/php-php-input-vs-post — Felippe Duarte, Jun 18 '20 at 16:50
Doing this worked except it broke it for JQuery and PHP is receiving it as an Object, the best solution so far though — TheLovelySausage, Jun 18 '20 at 17:05
@FelippeDuarte, it looks like the way you recommended is the right way of doing it and I was actually doing the JQuery one wrong. Thanks so much for your assistance, could you please post an answer so that I can accept? — TheLovelySausage, Jun 18 '20 at 17:24

score 1 · Accepted Answer · answered Jun 18 '20 at 18:11

Use the option you already tried:

var axios = require("axios");
var data = {};
data.array = ["One", "Two", "Three"];
axios ({
   url     : lv_url,
   method  : "POST",
   params  : data
})
.then(function(res) { console.log(JSON.stringify(res.data)); })
.catch(function(res) { });
return;

But in PHP side, you will not have a $_POST populated, instead use the php://input:

 $data = json_decode(file_get_contents("php://input"));

More on this answer: https://stackoverflow.com/a/8893792/1580044

Thank you very much, this got me on the right track – TheLovelySausage Jun 18 '20 at 19:04 — TheLovelySausage, Jun 18 '20 at 19:04

Axios POST Request Unexpected Data Format

1 Answers1