How to post query parameters with Axios?

The Axios method signature is axios.post(url[, data[, config]]). Therefore, you can send the params object as the third parameter:

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

This will send a request with an empty body and two query parameters:

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

As of 2021, when passing null, I had to add {} to make it work!

javascript
axios.post(
        url,
        {},
        {
          params: {
            key,
            checksum
          }
        }
      )
      .then(response => {
        return success(response);
      })
      .catch(error => {
        return fail(error);
      });

In my case, the API responded with a CORS error. Instead, I formatted the query parameters as a query string. It successfully sent the data and avoided the CORS issue.

javascript
var data = {};

const params = new URLSearchParams({
  contact: this.ContactPerson,
  phoneNumber: this.PhoneNumber,
  email: this.Email
}).toString();

const url =
  "https://test.com/api/UpdateProfile?" +
  params;

axios
  .post(url, data, {
    headers: {
      aaid: this.ID,
      token: this.Token
    }
  })
  .then(res => {
    this.Info = JSON.parse(res.data);
  })
  .catch(err => {
    console.log(err);
  });

You can use both params and body in Axios requests.

javascript
sendAllData (data) {
   return axios
        .post(API_URL + "receiveData", JSON.stringify(data), {
          headers: { "Content-Type": "application/json; charset=UTF-8" },
          params: { mail: xyx@example.col }, // Add mail as a param
        })
        .then((response) => console.log("repsonse", response.status)); 
}

When using Axios for POST requests, query parameters are typically appended to the URL, while the request body contains the POST data. If you need to set query parameters in a POST request, you can directly add them to the URL or use the params configuration option to specify these parameters.

Below is a specific example of how to set query parameters in an Axios POST request:

javascript
const axios = require('axios');

// Set the POST request data
const postData = {
    key1: 'value1',
    key2: 'value2'
};

// Set the query parameters
const queryParams = {
    param1: 'value1',
    param2: 'value2'
};

// Make the POST request
axios.post('https://example.com/api/resource', postData, {
    params: queryParams
})
.then(response => {
    console.log('Response:', response.data);
})
.catch(error => {
    console.error('Error:', error);
});

The generated request URL will look like this:

shell
https://example.com/api/resource?param1=value1&param2=value2

At the same time, the content of postData is sent as the POST request body. This approach allows you to send both request body data and query parameters in a single POST request.