CODEWITHSUNDEEP
javascriptvue.jsasp.net-coreasp.net-web-apiaxios
Qiuzman
Qiuzman

Reputation: 1761

VueJS + Axios Post request not passing parameter value

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);
                    });

Upvotes: 1

Views: 2052

Answers (2)

Bruno Francisco
Bruno Francisco

Reputation: 4240

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

Edit

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')

Upvotes: 2

Aditya Sethi
Aditya Sethi

Reputation: 10586

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);
})

Upvotes: 0

Related Questions