How to Pass Query Parameters with Axios HTTP POST Requests?

Axios Query Parameters with HTTP POST Requests

When posting data to an API using Axios, query parameters can be used to specify additional information. However, users may encounter issues when attempting to pass such parameters.

Problem:
A React Native application using Axios to post data to an API with query parameters encountered a 400 error due to an invalid query parameter format. The post method utilized was:

.post(`/mails/users/sendVerificationMail`, {
  mail,
  firstname
})
.then(response => response.status)
.catch(err => console.warn(err));

Solution:
The issue lies in the signature of Axios' post method. To pass query parameters, they must be included within the third parameter as part of a params object. The correct code should be:

.post(`/mails/users/sendVerificationMail`, null, { params: {
  mail,
  firstname
}})
.then(response => response.status)
.catch(err => console.warn(err));

This will result in an empty POST request body with the two query parameters included in the URL:

POST
http://localhost:8000/api/mails/users/sendVerificationMail?mail=lol%40lol.com&firstname=myFirstName

The above is the detailed content of How to Pass Query Parameters with Axios HTTP POST Requests?. For more information, please follow other related articles on the PHP Chinese website!