Headers y Body en Fetch: Configuración Avanzada de Peticiones
Aprende a configurar cabeceras HTTP y cuerpos de solicitud en Fetch API para enviar datos JSON, autenticación, y metadatos personalizados.
TL;DR - Resumen rápido
- Los headers HTTP envían metadatos sobre la petición y el contenido
- Content-Type indica el formato del cuerpo (application/json, etc.)
- Authorization se usa para enviar tokens de autenticación
- El body debe ser una string (JSON.stringify para objetos)
- Fetch soporta múltiples tipos de body: JSON, FormData, Blob, etc.
Introducción a Headers y Body
Los headers y el body son dos componentes fundamentales de las peticiones HTTP. Los headers (cabeceras) son metadatos que viajan con la petición y contienen información importante como el tipo de contenido, autenticación, caching, y más. El body (cuerpo) contiene los datos que deseas enviar al servidor, como un objeto JSON, un archivo, o datos de formulario.
En Fetch API, los headers se configuran a través del objeto headersen las opciones de la petición, mientras que el body se configura a través de la propiedad body. Es crucial entender cómo usar correctamente estos componentes, ya que un error en la configuración puede causar que el servidor rechace la petición o interprete incorrectamente los datos enviados.
- <strong>Headers</strong>: Metadatos sobre la petición (tipo de contenido, autenticación, etc.)
- <strong>Body</strong>: Datos enviados al servidor (JSON, FormData, archivos, etc.)
- <strong>Content-Type</strong>: Header que indica el formato del body
- <strong>Authorization</strong>: Header para enviar credenciales de autenticación
- <strong>Accept</strong>: Header que indica qué tipo de respuesta esperas
Headers HTTP
Los headers HTTP son pares clave-valor que envían metadatos sobre la petición y el contenido. Se usan para comunicar información importante al servidor, como el tipo de contenido que envías, tu identidad de autenticación, preferencias de idioma, y más. En Fetch, los headers se configuran como un objeto en la propiedad headers de las opciones de la petición.
Headers Comunes
Hay varios headers HTTP que son comúnmente usados en aplicaciones web.Content-Type es probablemente el más importante, ya que indica al servidor cómo interpretar el cuerpo de la solicitud.Authorization se usa para enviar tokens de autenticación, mientras que Accept indica qué tipo de respuesta esperas del servidor.
Este ejemplo muestra los headers más comúnmente usados en peticiones HTTP.Content-Type indica que estamos enviando JSON, Authorizationenvía un token Bearer para autenticación, y Accept indica que esperamos recibir JSON en la respuesta. Estos headers son esenciales para que el servidor entienda correctamente tu petición y responda apropiadamente.
Además de los headers básicos, hay otros headers útiles comoAccept-Language para indicar tu idioma preferido,Cache-Control para controlar el caching de la respuesta, y User-Agent para identificar tu aplicación. Estos headers mejoran la experiencia del usuario y optimizan el rendimiento de las peticiones.
Headers prohibidos
Algunos headers son "forbidden headers" que no puedes modificar por seguridad, como Host, Connection, yContent-Length. El navegador los establece automáticamente. Intentar modificar estos headers será ignorado silenciosamente por el navegador.
Headers Personalizados
Además de los headers estándar de HTTP, puedes crear headers personalizados para tu aplicación. Los headers personalizados deben comenzar con el prefijoX- por convención, aunque esta práctica está siendo desalentada en favor de nombres más descriptivos sin el prefijo. Los headers personalizados son útiles para enviar información específica de tu aplicación que no está cubierta por los headers estándar.
Este ejemplo muestra cómo crear y usar headers personalizados. Puedes usar headers personalizados para enviar información como el ID de la sesión, el tipo de cliente (web, móvil, etc.), o cualquier otro metadato específico de tu aplicación. Ten en cuenta que algunos servidores pueden requerir configuración especial para aceptar headers personalizados, especialmente si usan CORS.
Headers y CORS
Cuando haces peticiones a dominios diferentes (CORS), el servidor debe incluir los headers personalizados en la respuesta Access-Control-Allow-Headers. Si no lo hace, el navegador bloqueará la petición. Asegúrate de que tu servidor esté configurado para aceptar los headers que envías.
Body en Fetch
El body de una petición HTTP contiene los datos que deseas enviar al servidor. En Fetch API, el body se configura a través de la propiedad bodyen las opciones de la petición. Es importante notar que el body debe ser una de las siguientes opciones: una string (como JSON), un objeto FormData, un Blob, un ArrayBuffer, o un URLSearchParams. No puedes pasar un objeto JavaScript directamente sin convertirlo primero.
Tipos de Body
Fetch API soporta múltiples tipos de body, cada uno con su propio caso de uso. JSON es el más común para APIs REST modernas, FormData es ideal para uploads de archivos y formularios HTML, Blob se usa para datos binarios como imágenes, y URLSearchParams es útil para datos de formulario codificados como URL. Elegir el tipo correcto de body es crucial para que el servidor interprete correctamente los datos que envías.
- <strong>JSON</strong>: Para APIs REST y datos estructurados (más común)
- <strong>FormData</strong>: Para uploads de archivos y formularios multipart
- <strong>URLSearchParams</strong>: Para formularios application/x-www-form-urlencoded
- <strong>Blob</strong>: Para datos binarios como imágenes o archivos
- <strong>ArrayBuffer</strong>: Para datos binarios crudos (menos común)
JSON como Body
JSON es el formato más común para enviar datos en APIs REST modernas. Es ligero, fácil de leer, y soporta estructuras de datos complejas como objetos anidados y arrays. Para enviar JSON en Fetch, debes convertir el objeto JavaScript a una string JSON usando JSON.stringify() y especificar el header Content-Type: application/json para que el servidor sepa cómo interpretar los datos.
Este ejemplo muestra la forma estándar de enviar JSON en una petición Fetch. Convertimos el objeto JavaScript a JSON usando JSON.stringify()y especificamos el header Content-Type: application/json. El servidor usará este header para saber que debe parsear el cuerpo como JSON en lugar de texto plano o cualquier otro formato.
JSON soporta estructuras de datos complejas como objetos anidados y arrays. Este ejemplo muestra cómo enviar un objeto con propiedades anidadas y arrays.JSON.stringify() convierte automáticamente estas estructuras complejas a JSON válido, y el servidor puede parsearlas fácilmente en la mayoría de los lenguajes de programación modernos.
También puedes enviar arrays como body en lugar de objetos. Esto es útil cuando necesitas enviar múltiples elementos en una sola petición, como una lista de usuarios para crear en lote. El servidor recibirá el array y puede procesarlo según sus necesidades, creando múltiples recursos en una sola operación.
JSON.stringify y replacer
JSON.stringify() acepta un segundo parámetro opcional llamadoreplacer que te permite transformar o filtrar propiedades antes de la conversión. Útil para ocultar datos sensibles o formatear fechas. También acepta un tercer parámetro para pretty-printing con indentación.
Errores Comunes
Al trabajar con headers y body en Fetch, hay varios errores comunes que los desarrolladores cometen. Uno de los errores más frecuentes es olvidar el headerContent-Type cuando envías JSON. Sin este header, el servidor no sabe que estás enviando JSON y puede intentar interpretar los datos como texto plano, causando errores de parsing o comportamiento inesperado.
Este ejemplo muestra el error común de olvidar el header Content-Type. Aunque el código parece correcto, el servidor no sabrá que estás enviando JSON y podría intentar interpretar los datos como texto plano. Siempre incluye el header Content-Type apropiado cuando envíes un cuerpo en la solicitud: 'application/json' para JSON, 'multipart/form-data' para FormData, etc.
Otro error común es pasar un objeto JavaScript directamente a la propiedadbody sin convertirlo a string. La propiedad bodyespera una string, Buffer, o un objeto que implemente el método toString(). Si pasas un objeto directamente, Fetch intentará convertirlo a string usandotoString(), que producirá "[object Object]" en lugar del JSON esperado.
Cuando usas FormData para enviar archivos o datos de formulario, es un error común especificar manualmente el header Content-Type. El navegador establece automáticamente este header con el boundary correcto para separar las partes del formulario. Si lo especificas manualmente, el boundary se perderá y el servidor no podrá parsear correctamente el FormData.
Resumen: Headers y Body en Fetch
Conceptos principales:
- •Los headers HTTP envían metadatos sobre la petición y el contenido
- •Content-Type indica el formato del body (application/json, etc.)
- •Authorization se usa para enviar tokens de autenticación
- •El body debe ser una string (JSON.stringify para objetos)
- •Fetch soporta múltiples tipos de body: JSON, FormData, Blob, etc.
Mejores prácticas:
- •Siempre incluye Content-Type cuando envíes un cuerpo en la solicitud
- •Usa JSON.stringify() para convertir objetos a JSON antes de enviarlos
- •No especifiques Content-Type manualmente cuando uses FormData
- •Usa headers personalizados con prefijo X- para metadatos específicos
- •Verifica que el servidor acepte tus headers personalizados en CORS