¿Cómo publicar parámetros de consulta con Axios?

2 minutos de lectura

avatar de usuario
GuillaumeRZ

Estoy tratando de publicar en una API con algunos parámetros de consulta. Esto funciona en PostMan / Insomnia cuando intento pasar el correo y el nombre como parámetros de consulta:

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

Sin embargo, cuando intento hacerlo con mi aplicación nativa de reacción, aparece un error 400 (Parámetros de consulta no válidos).

Este es el método de publicación:

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

(mi correo electrónico y mi nombre son console.registrados de la siguiente manera: lol@lol.com y myFirstName).

Entonces, no sé cómo pasar los parámetros de consulta con Axios en mi solicitud (porque en este momento está pasando data: { mail: "lol@lol.com", firstname: "myFirstName" }.

la firma de axios para la publicación es axios.post(url[, data[, config]]). Entonces desea enviar el objeto params dentro del tercer argumento:

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

Esto publicará un cuerpo vacío con los dos parámetros de consulta:

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

  • ¿Cómo puedo enviar una solicitud con parámetros y cuerpo con axios?

    – jodekazemi

    30 de abril de 2020 a las 5:18

  • @jodekazemi .post(/mails/users/sendVerificationMailcuerpo, { params: { mail, firstname }}) .then(response => response.status) .catch(err => console.warn(err));

    – Mahmud Elgohary

    17 de mayo de 2020 a las 13:14


¡A partir de 2021, en lugar de nulo, tuve que agregar {} para que funcionara!

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

  • El año no tiene sentido. Para axios versión 0.27.2, null o undefined funciona como el segundo parámetro. axios.post(url, null, { params: { ... } })

    – oyalhi

    6 de julio a las 21:21


En mi caso, la API respondió con un error CORS. En su lugar, formateé los parámetros de consulta en una cadena de consulta. Publicó datos con éxito y también evitó el problema de CORS.

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

¿Ha sido útil esta solución?