I have a API that updates data in the database but then returns back a query. The API takes a single parameter and it works when testing it manually through browser and when also testing using a axios get request. However for security purposes I wanted to try and stick with POST request and to just test it out, however if I try to run this via a POST (change axios.get to axios.post) request the parameter value is not passed to the API. Here is my axios request below. What could be the issue?
axios.post(window.location.origin + '/API/StateContacts', {
params: {
STATE_DD_INPUT: stateDD
}
})
.then(response => {
this.stateContactsArray = response.data;
}).catch(error => {
console.log(error.response.data.error);
});
Axios post second parameter is already the data you are trying to pass. From
axios.post(window.location.origin + '/API/StateContacts', {
params: {
STATE_DD_INPUT: stateDD
}
})
to
axios.post(window.location.origin + '/API/StateContacts', {
STATE_DD_INPUT: stateDD
})
should solve your issue
You commented:
However if I do this and add a {} it works but not sure why.
axios.post(window.location.origin + '/API/StateContacts', {}, { params: { STATE_DD_INPUT: stateDD } }) .then(response => { this.stateContactsArray = response.data; }).catch(error => { console.log(error.response.data.error); });
This is because the signature for axios.post function is:
axios.post(url[, data[, config]])
Instead of passing the data as the second argument you are passing the third argument which is the config. The config object has the parameters key that will add to your request the following query parameters:
http://localhost/API/StateContacts?STATE_DD_INPUT=xxx
where the query string will be STATE_DD_INPUT.
Since we don't know your backend we are assuming that you are using a method to get the query string from the request and not the body of the request. Frameworks like Laravel looks at the query string and the body for what you searching. E.g.
$request->get('STATE_DD_INPUT')
You are probably using a framework that has two different methods. One to get the query parameters (e.g. from the URL - https://localhost/API/StateContacts?STATE_DD_INPUT=xxxx) and other to get from the body (e.g. the one sent in the body request - please, consult this docs to learn more about POST body). So, maybe somewhere in your backend code you will have
$request->body('STATE_DD_INPUT')
To be able to get the request from the query string you should have some method to do that. e.g.
$request->query('STATE_DD_INPUT')
Do you want to pass parameter in header?
axios.post(window.location.origin + '/API/StateContacts', {
headers: {
'Content-Type': 'application/json',
'STATE_DD_INPUT': stateDD
}
})
.then((response) => {
console.log(response.data)
})
.catch((error) => {
console.log(error);
})