Axios posting params not read by $_POST

Question

So I have this code:

axios({
    method: \'post\',
    url,
    headers: { \'Content-Type\': \'application/x-www-form-urlencoded\' },
    data: {
        jso         


        

Answer 1

To make things easier and universal if you ever decided to switch between AJAX libraries or server languages. With axios use the native JS FormData.
If you have your data in an object, you can convert it to FormData like this:

var myDataObj = {id:1, name:"blah blah"}
var formData = new FormData();


for (var key in myDataObj) {
    formData.append(key, myDataObj[key])
}

Then you send the data:

axios.post('/sub/process.php', formData, {
    params: { action: "update-user" },
    headers: { 'Content-Type': 'multipart/form-data' },
    baseURL: 'http://localhost',
}).then(data =>
    console.log(data)
).catch(err => {
    console.log(err)
    return null
})

Notice, you can also send some info using params in axios that you can retrieve using $_GET. Also notice that I am using the baseURL in case you have different servers for the web page and your API endpoint.
You need to understand also that before axios send the real request, it performs a preflight request. A preflight request, is a mechanism in CORS by the browser to check if the resource destination is willing to accept the real request or not. Afterall, why would a request be sent when the target host is not willing to receive it anyway?

You have to make sure that your server has the right headers for your axios request, otherwise the preflight request will detect the incompatibility and stop your request:

//this is if you are using different different origins/servers in your localhost, * to be update with the right address when it comes to production
header('Access-Control-Allow-Origin: *');
//this is if you are specifying content-type in your axios request
header("Access-Control-Allow-Headers: Content-Type");

Now, you will able to access your sent data in the $_POST variable:

echo "
";
print_r($_POST);
echo "
";

Additionally, axios allows you to send data in different formats. you can send a json for example like this:

axios.post('/sub/process.php', { id: "1", name:"blablah" }, {
    params: { action: "update-item" },
    headers: { 'Content-Type': 'application/json' },
    baseURL: 'http://localhost',
}).then(data =>
    console.log(data)
).catch(err => {
    console.log(err)
    return null
})

In the PHP side, this can be accessed as follows:

$data = json_decode(file_get_contents("php://input"),true);
echo "
";
print_r($data);
echo "
";