How to post query parameters with Axios?

Question

I am trying to post on an API with some query params. This is working on PostMan / Insomnia when I am trying to by passing mail and firstname as query parameters :

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

However, when I am trying to do it with my react native app, I got a 400 error (Invalid Query Parameters).

This is the post method :

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

(my mail and firstname are console.logged as follow: lol@lol.com and myFirstName).

So I don't know how to pass Query Parameters with Axios in my request (because right now, it's passing data: { mail: "lol@lol.com", firstname: "myFirstName" }.

score 383 · Accepted Answer · answered Nov 27 '18 at 13:56

383

axios signature for post is axios.post(url[, data[, config]]). So you want to send params object within the third argument:

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

This will POST an empty body with the two query params:

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

answered Nov 27 '18 at 13:56

enapupe

15,691
3
29
45

1

how can i send request with params and body with axios? – khodekazemi Apr 30 '20 at 05:18
5

@khodekazemi .post(`/mails/users/sendVerificationMail`, body, { params: { mail, firstname }}) .then(response => response.status) .catch(err => console.warn(err)); – Mahmoud Elgohary May 17 '20 at 13:14
This doesn't support sending objects, such as a file. – Thomas Dec 30 '22 at 15:28
1

@Thomas why do you say that and why is that relevant to the question? – enapupe Jan 29 '23 at 16:32

score 32 · Answer 2 · answered Jan 22 '21 at 16:48

32

As of 2021 insted of null i had to add {} in order to make it work!

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

answered Jan 22 '21 at 16:48

Vasilis Mpletsos

329
3
3

3

Year makes no sense. For `axios` version `0.27.2`, `null` or `undefined` works as the second parameter. `axios.post(url, null, { params: { ... } })` – oyalhi Jul 06 '22 at 21:21

score 11 · Answer 3 · answered Jul 13 '20 at 23:55

In my case, the API responded with a CORS error. I instead formatted the query parameters into query string. It successfully posted data and also avoided the CORS issue.

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

score 1 · Answer 4 · answered Dec 14 '22 at 05:44

You can use params and body together in a request with axios

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

How to post query parameters with Axios?

4 Answers4

Linked