Headers HTTP: qué son y cómo funcionan

Contenido del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

17
APIs REST con JavaScript dominadas
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:57

Headers HTTP: qué son y cómo funcionan

Curso de API REST con Javascript

Clase 4 de 17

Clase 4 / 17

Recursos

Cada vez que tu navegador conversa con un servidor, no manda solo el mensaje principal: incluye instrucciones adicionales que explican cómo quiere recibir la información. Esas instrucciones son los headers HTTP, y entenderlos te ayuda a optimizar APIs, autenticar usuarios y diagnosticar fallos en cualquier aplicación web.

Qué son los headers HTTP y para qué sirven

Los headers son pares de clave-valor que viajan junto con cada petición y respuesta HTTP. Funcionan como metadatos que aportan contexto sobre la comunicación entre cliente y servidor.

Una analogía simple: si comparas la petición con una carta, el body es el contenido escrito y los headers son el sobre. Ese sobre lleva la dirección del remitente, la del destinatario y el tipo de envío. Sin esa información, la carta no llegaría a su destino.

¿Cuál es la diferencia entre headers y body en HTTP? El body contiene los datos principales que se envían o reciben. Los headers contienen las instrucciones sobre cómo manejar esos datos: tipo de contenido, autenticación, caché y más.

Cuáles son los headers HTTP más importantes en una petición

Cuando tu navegador o aplicación JavaScript hace una petición a una API, incluye varios headers de forma automática [0:38]. Estos son los que más vas a ver:

Host: indica a qué servidor te estás conectando. Es como decirle al cartero a qué edificio debe ir.
User-Agent: identifica qué navegador o aplicación realiza la petición, para que el servidor adapte su respuesta.
Accept: aquí empieza la content negotiation. Le dice al servidor qué tipo de contenido puede entender el cliente.
Authorization: contiene las credenciales del usuario. Es como mostrar tu identificación antes de entrar a un edificio.

La negociación de contenido que ocurre con Accept es clave: si tu app espera JSON, ese header se lo comunica al servidor para evitar respuestas en formatos que no puedes procesar.

Qué headers envía el servidor en la respuesta

La respuesta también viene con sus propios headers, y cada uno cumple un rol específico [1:25]:

Content-Type: indica qué tipo de contenido recibes. Si pediste JSON pero llega HTML, tu JavaScript necesita saberlo para procesarlo bien.
Content-Length: muestra el tamaño de la respuesta en bytes. Tu navegador lo usa para dibujar barras de progreso.
Cache-Control: instruye al cliente sobre cómo y por cuánto tiempo puede guardar esa respuesta. Es decisivo para el rendimiento.

Entender Cache-Control marca la diferencia entre una app rápida y una que repite peticiones innecesarias. El caché inteligente reduce latencia y consumo de datos.

Cómo usar headers personalizados en APIs modernas

Muchas APIs definen sus propios headers para casos puntuales. Por convención solían empezar con X-, aunque hoy esa práctica ya no se recomienda [2:05].

Algunos usos comunes de headers personalizados:

Rate limiting: con headers como X-RateLimit puedes saber cuántas peticiones te quedan antes de que el servidor te bloquee temporalmente.
Tokens de autenticación personalizados: cuando el flujo estándar de Authorization no encaja con la lógica de la API.
Versionado de la API: para que el cliente y el servidor se pongan de acuerdo sobre qué versión están usando.

¿Qué significa el header X-RateLimit? Es un header personalizado que las APIs usan para indicar cuántas peticiones te quedan dentro de un periodo. Sirve para que tu cliente controle el ritmo y evite errores por exceso de uso.

Por qué dominar los headers mejora tus aplicaciones web

Los headers son el sistema nervioso de la comunicación HTTP. Mientras el body transporta los datos, los headers llevan las reglas sobre cómo tratarlos.

Dominarlos te permite:

Optimizar el rendimiento con caché inteligente vía Cache-Control.
Implementar autenticación robusta usando Authorization y tokens personalizados.
Negociar el mejor formato de datos con Accept y Content-Type.
Diagnosticar problemas de comunicación leyendo los headers en cada respuesta.

En la siguiente clase vas a ver cómo abrir las dev tools del navegador para inspeccionar todos los componentes de una petición HTTP: status, method y headers. ¿Qué header te ha causado más dudas en tus proyectos? Cuéntalo en los comentarios.

Fundamentos HTTP

Cómo JavaScript habla con una API

Cómo funciona el protocolo HTTP entre JavaScript y APIs

Qué significan los códigos de estado HTTP

Headers HTTP: qué son y cómo funcionan

Peticiones HTTP reales en el navegador

APIs y REST para consumidores

Como APIs usam HTTP para conectar apps

Qué es REST y cómo organiza las APIs web

Documentación de API REST con editor de texto

Setup y Arquitectura Base

Configuración de template de tienda virtual para consumir API REST

Peticiones HTTP con Fetch en JavaScript

Patrón repositorio para centralizar fetch

Métodos HTTP en práctica con FakeStoreAPI

Integración de productos y detalle con fetch

Filtrar productos por categoría con URLSearchParams

Crear productos con fetch y POST

Edición de productos con verbo PUT en JavaScript

Cómo implementar DELETE en un repositorio

Optimización y próximos pasos

APIs REST con JavaScript dominadas

Headers HTTP: qué son y cómo funcionan

Progreso del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

Recursos

Recursos