Axios Posting Params Not Read by $_Post

Axios posting params not read by $_POST

From the documentation (I haven't preserved links in the quoted material):

Using application/x-www-form-urlencoded format

By default, axios serializes JavaScript objects to JSON.

PHP doesn't support JSON as a data format for populating $_POST.

It only supports the machine-processable formats natively supported by HTML forms:

• application/x-www-form-urlencoded
• multipart/form-data

To send data in the application/x-www-form-urlencoded format instead, you can use
one of the following options.

Browser

In a browser, you can use the URLSearchParams API as follows:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params); 

Note that URLSearchParams is not supported by all browsers, but there
is a polyfill available (make sure to polyfill the global
environment).

Alternatively, you can encode data using the qs library:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

Or you could customise your PHP so it can handle JSON as per this answer on another question.

Axios post request not sending parameters

Option 1:
Define config object

let config = {
  headers: {
     'Content-Type': 'application/x-www-form-urlencoded',
  } 
}  

Mandatory: Use array for params and not js object for 'application/x-www-form-urlencoded'

const params = new URLSearchParams();
params.append('PARAM1', 'VALUE1');
params.append('PARAM2', 'VALUE2');

Call post

 axios.post( uri, params, config )

or

 axios({
     url,
     headers: { 'content-type': 'application/x-www-form-urlencoded' }
     data: params
 })

Option 2:
Create an api instance (optional) and set default content-type

const api_local = axios.create({
   baseURL: 'http://localhost:1000/myapi',
});
api_local.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 

Mandatory: Use array for params and not js object for 'application/x-www-form-urlencoded'

const params = new URLSearchParams();
params.append('PARAM1', 'VALUE1');
params.append('PARAM2', 'VALUE2');

Call post

 api_local.post( uri, params )

How to retrieve variables in php sent by axios post request

Axios sends data as a JSON inside request body not as a Form Data. So you can't access the post data using $_POST['id'].

Frontend Solution

To be able to access data using $_POST['id'] you have to use FormData as the following:

var form = new FormData();
form.append('id', this.selected);
axios.post('inc/vote.php', {
    form
  }) .then(function (response) {
    console.log(response);
  });

Backend Solution
if you are interested in getting the request body as associative array you can use:

$data = json_decode(file_get_contents("php://input"), TRUE);
$id = $data['id'];

axios not sending request body in nodejs

Look at the documentation for axios:

By default, axios serializes JavaScript objects to JSON

So you are POSTing JSON to the server.

PHP doesn't support JSON when it comes to populating $_POST.

You need to POST a format that it supports, such as URL Encoded Form Data or Multipart Form Data.

(Your jQuery example is using URL Encoded Form Data).

To send data in the application/x-www-form-urlencoded format instead,
you can use the URLSearchParams API, which is supported in the vast
majority of browsers, and Node starting with v10 (released in 2018).

const params = new URLSearchParams({ foo: 'bar' });
params.append('extraparam', 'value');
axios.post('/foo', params);

---

Related Topics