VueJS + Axios Post request not passing parameter value

Question

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

Bruno Francisco · Accepted Answer · 2021-08-09 17:11:34Z

2

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

edited Aug 9, 2021 at 17:11

answered Aug 9, 2021 at 14:56

Bruno Francisco

4,2426 gold badges37 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Qiuzman Over a year ago

It does not solve it for some reason. Still not passing parameter. 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); });

Bruno Francisco Over a year ago

@Bradyboyy88 I have updated my question to answer this comment. If this answer answers your question, please mark it as the correct answer

Qiuzman Over a year ago

I am going through your answer to fully understand but just for reference I am using asp.net core web api controllers.

Qiuzman Over a year ago

Can you explain what this format is axios.post(url[, data[, config]]) in your post. Adding {} works but I looking at what you posted It is unclear to me this syntax. Is this saying URL contains a data array which contains a config array and my parameters are in the config array which my API must account for and the reason it is working?

Qiuzman Over a year ago

And also in my web API I use FromQuery so why does the parameters in the config work?

|

Aditya Sethi · Accepted Answer · 2021-08-09 16:07:38Z

0

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

answered Aug 9, 2021 at 16:07

Aditya Sethi

10.6k11 gold badges28 silver badges31 bronze badges

1 Comment

Qiuzman Over a year ago

any reason to pass it in the header vs something else (assuming body)? Relatively new to http requests so not sure if one is favored over the other.

Collectives™ on Stack Overflow

VueJS + Axios Post request not passing parameter value

2 Answers 2

Edit

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related