Cómo enviar encabezados con una solicitud POST de Axios

En este breve tutorial, veremos cómo personalizar el encabezado de la solicitud POST de Axios que queremos enviar a algún tipo de API REST.

Introducción

Axios es una biblioteca de cliente HTTP que se utiliza para enviar solicitudes HTTP asíncronas, como POST, GET y DELETE a puntos finales REST (principalmente API). Algunas de estas solicitudes, como GET y POST, pueden incluir encabezados, que proporcionan una fuente adicional de información para cada llamada a la API.

En este artículo, aprenderemos cómo enviar encabezados junto con nuestra solicitud POST en Axios.

Los encabezados son fundamentales cuando se realizan solicitudes de API y son uno de los primeros lugares en los que buscamos cuando encontramos problemas con una API porque nos ayudan a rastrear cualquier problema potencial.

Estructura de solicitud POST en Axios

Una solicitud POST de Axios puede aceptar tres parámetros: la URL del punto final, los datos y el objeto de configuración, que acepta encabezados:

1
const res = await axios.post(URL, data, config);

Envío de encabezados con solicitud POST de Axios

Al pasar encabezados a Axios, proporcionamos un objeto que contiene los encabezados que queremos pasar como el parámetro config. Por ejemplo, supongamos que queremos enviar una solicitud POST a un servidor que solo acepta el tipo de contenido text/json (en lugar del habitual application/json). En ese caso, podemos personalizar el tipo de contenido que queremos enviar en la cabecera:

1
2
3
4
5
const result = await axios.post('https://testapi.org/post', { name: 'John Doe' }, {
    headers: {
    'content-type': 'text/json'
    }
});

Alternativamente, podemos usar variables en lugar de pasar estos objetos directamente al método axios.post(). Esto definitivamente mejora la legibilidad de nuestro código:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const headers = {
    "Content-Type": "text/json"
};

const data = {
    name: "John Doe"
};

const result = await axios.post("https://testapi.org/post", data, {
    headers: headers
});

Confirmemos rápidamente que esto funciona como se esperaba:

1
console.log(result.data.headers['Content-Type']); // text/json

Conclusión

En este artículo, aprendimos cómo enviar encabezados con solicitudes POST en Axios, así como la estructura de una solicitud de Axios, para que no confundamos el objeto config con el objeto data, como mucha gente lo hace.