Axios posting params not read by $_POST
JavascriptPhpReactjsAxiosJavascript Problem Overview
So I have this code:
axios({
method: 'post',
url,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: {
json,
type,
}
})
Originally I had the normal axios.post
but I changed to this because I thought it might have been a header problem. However I am still detecting nothing in my $_REQUEST
nor $_POST
. However, it is receiving data in file_get_contents("php://input")
.
Any idea what is wrong?
Edit
Okay I think I know what's wrong. It's posting it as a json object so it can only be read in the php://input. How do I change it to a normal string in axios?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
var params = {
data1: 'string',
}
axios.post(url, params).then(function(response) {
//code here
});
or
axios.post(url, {data1: 'string' }).then(function(response) {
//code here
});
api
$_POST = json_decode(file_get_contents("php://input"),true);
echo $_POST['data1'];
Solution 3 - Javascript
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 "<pre>";
print_r($_POST);
echo "</pre>";
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 "<pre>";
print_r($data);
echo "</pre>";
Solution 4 - Javascript
Using PHP std object
Using PHP std object structure to get the variables of the post.
On the client:
axios.post(url, {id: 1 , Name:'My Name' }).then(function(response) {
console.log(response.data);
});
On the server
$obj = json_decode(file_get_contents('php://input'));
$id = $obj->id;
$Name = $obj->Name;
//test by returning the same values
$retObj=(object)["id"=>$id,"Name"=>$Name]
echo json_encode($retObj);
Both jQuery and Axios using same PHP file
if you have a file receiving post both from axios and jquery you may use:
if($_SERVER['REQUEST_METHOD']==='POST' && empty($_POST)) {
$_POST = json_decode(file_get_contents('php://input'),true);
}
to convert the Axios json-serialized posts to the $_POST array
Solution 5 - Javascript
This code works on browser/node both today. I think this is more practical. I tested this code on node.js and passed the data variable to PHP8 using $_POST['param1'] and it worked perfectly.
function axqs(d){
let p = new URLSearchParams();
Object.keys(d).forEach(function(key){
p.append(key, this[key]);
}, d);
return p
}
let data = {
'param1': 'value1',
'param2': 'value2',
}
let p = axqs(data)
axios.post('/foo', p)
Solution 6 - Javascript
Just wanted to share my insights, I was facing a similar problem and solved it by the following code set
JS
const instructions_str = {
login: {
"type": "devTool",
"method": "devTool_login",
"data": {
"username": "test",
"password": "Test@the9"
}
},
tables: {
"type": "devTool",
"method": "devTool_get_all_tables",
"data": ""
}
};
const body = {
firstName: 'Fred',
lastName: 'Flintstone',
name: "John",
time: "2pm",
instructions : JSON.stringify(instructions_str)
};
function decodeData(data) {
const serializedData = []
for (const k in data) {
if (data[k]) {
serializedData.push(`${k}=${encodeURIComponent(data[k])}`)
}
}
return serializedData.join('&')
};
const body2 = decodeData(body);
axios.post('URL', body2)
.then(response => {
console.log("contextApi got it", response);
}).catch(error => {
console.log("contextApi error.response", error.response);
});
PHP
// set content return type
header('Content-Type: application/json');
// Setting up some server access controls to allow people to get information
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: POST, GET');
// This way I can check and see what I sent
$postVars_array = $_POST ?? parse_str(file_get_contents("php://input"),$postVars_array) ?? [];
echo json_encode($postVars_array);
I also found this github page very helpful https://github.com/axios/axios/issues/1195