Enviando Datos con Postman y React: Guía Completa de los Tipos de Body y su Implementación con Node.js

Introducción

Uno de los aspectos fundamentales cuando trabajamos con APIs es entender cómo se envían datos desde el cliente (frontend) y cómo se reciben en el servidor (backend). En esta guía práctica y paso a paso, te explicaré los tipos más comunes de cuerpos (body) en peticiones HTTP utilizando Postman para probar y ReactJS + Node.js con Express para implementar.

Vamos a cubrir:

✅ application/json

✅ application/x-www-form-urlencoded

✅ multipart/form-data (form-data)

✅ binary (solo archivo)

En un próximo post veremos las integraciones con GraphQL, que requieren una estructura diferente de peticiones.

1. application/json

🔍 Qué es

Este es el tipo más común para APIs REST. Enviamos datos estructurados como objetos JSON. Ideal para enviar datos como usuarios, configuraciones, productos, etc.

📅 En Postman

1️⃣ Selecciona el método POST.

2️⃣ En la pestaña Body, marca raw.

3️⃣ Elige JSON como formato.

4️⃣ Escribe un objeto JSON:

1{
2  "name": "Wayki",
3  "type": "autodesk"
4}

⚙️ Backend en Node.js

1const express = require('express');
2const app = express();
3
4app.use(express.json()); // Middleware para JSON
5
6app.post('/json', (req, res) => {
7  console.log(req.body);
8  res.send(`Recibido JSON con nombre: ${req.body.name}`);
9});

En este fragmento activamos el middleware express.json() que permite que Express entienda peticiones con el encabezado Content-Type: application/json. Luego, en la ruta /json, accedemos al contenido enviado usando req.body.

💻 Frontend con React

1const sendJson = async () => {
2  await fetch('http://localhost:3000/json', {
3    method: 'POST',
4    headers: { 'Content-Type': 'application/json' },
5    body: JSON.stringify({ name: 'Wayki', type: 'autodesk' })
6  });
7};

En React utilizamos la función fetch para enviar los datos. El cuerpo debe ser serializado con JSON.stringify() y el encabezado debe indicar explícitamente que estamos enviando JSON.

2. application/x-www-form-urlencoded

🔍 Qué es

Usado principalmente por formularios HTML clásicos. Los datos se envían como pares clave-valor concatenados: clave1=valor1&clave2=valor2.

📅 En Postman

1️⃣ Selecciona x-www-form-urlencoded en Body.

2️⃣ Agrega campos como:

1- email = test@gmail.com
2- password = 123456

⚙️ Backend en Node.js

1const express = require('express');
2const bodyParser = require('body-parser');
3const app = express();
4
5app.use(bodyParser.urlencoded({ extended: true }));
6
7app.post('/urlencoded', (req, res) => {
8  console.log(req.body);
9  res.send(`Email recibido: ${req.body.email}`);
10});

Aquí usamos body-parser para procesar los datos enviados como formularios tradicionales. extended: true permite recibir objetos anidados si es necesario.

💻 Frontend con React

1const sendUrlEncoded = async () => {
2  const params = new URLSearchParams();
3  params.append('email', 'test@gmail.com');
4  params.append('password', '123456');
5
6  await fetch('http://localhost:3000/urlencoded', {
7    method: 'POST',
8    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
9    body: params.toString()
10  });
11};

En el frontend usamos URLSearchParams para convertir un objeto JS en formato clave=valor. No es necesario hacer stringify, ya que URLSearchParams lo hace automáticamente.

3. multipart/form-data (form-data)

🔍 Qué es

Se usa para enviar datos mixtos: archivos + campos de texto. Es el formato ideal para formularios que permiten subir archivos (PDF, imagen, Excel, etc.).

📅 En Postman

1️⃣ En Body, selecciona form-data.

2️⃣ Agrega campos:

1key: name (tipo text), value: Wayki
2key: file (tipo file), sube un archivo.

⚙️ Backend en Node.js

1const express = require('express');
2const multer = require('multer');
3const upload = multer({ dest: 'uploads/' });
4const app = express();
5
6app.post('/form-data', upload.single('file'), (req, res) => {
7  console.log(req.file);        // archivo
8  console.log(req.body.name);  // texto
9  res.send('Archivo y nombre recibidos');
10});

Usamos multer, un middleware para manejar formularios multipart. Este guarda los archivos en la carpeta uploads/ y deja los datos de texto disponibles en req.body.

💻 Frontend con React

1const sendFormData = async () => {
2  const formData = new FormData();
3  formData.append('name', 'Wayki Project');
4  formData.append('file', new File(['contenido'], 'example.txt', { type: 'text/plain' }));
5
6  await fetch('http://localhost:3000/form-data', {
7    method: 'POST',
8    body: formData
9  });
10};

FormData es una API del navegador que permite construir formularios complejos con archivos. No es necesario configurar headers manualmente, el navegador lo hace automáticamente.

4. binary (solo archivo sin otros campos)

🔍 Qué es

Envías un archivo "crudo" (binario) directamente, sin campos adicionales. Muy útil para subir PDFs, planos, DWGs, etc. desde Postman o código.

📅 En Postman

1️⃣ En Body, selecciona binary.

2️⃣Carga un archivo directamente.

⚙️ Backend en Node.js

1const express = require('express');
2const multer = require('multer');
3const upload = multer({ dest: 'uploads/' });
4const app = express();
5
6app.post('/binary', upload.single('file'), (req, res) => {
7  console.log(req.file);
8  res.send('Archivo binario recibido');
9});

Aunque parezca diferente, internamente se trata igual que un archivo recibido por form-data. El campo file debe coincidir con el nombre usado por Postman o React.

💻 Frontend con React

1const sendBinary = async () => {
2  const file = new File(['contenido'], 'documento.pdf', { type: 'application/pdf' });
3  const formData = new FormData();
4  formData.
5
6append('file', file);
7
8  await fetch('http://localhost:3000/binary', {
9    method: 'POST',
10    body: formData
11  });
12};

A pesar de ser una carga binaria, seguimos usando FormData desde el frontend para adjuntar el archivo. El backend lo maneja correctamente como un solo archivo sin campos adicionales.

Conclusión

Comprender los diferentes tipos de body es esencial para construir APIs robustas y clientes frontend que se comuniquen correctamente. Cada tipo tiene su propio caso de uso ideal:

Tipo	Cuándo usarlo
JSON	Datos estructurados
URL encoded	Formularios simples
Form-data	Archivos + texto
Binary	Solo archivos

En el siguiente post exploraremos las peticiones GraphQL, que requieren una estructura distinta y son muy utilizadas para consultas más flexibles.

Si este tutorial te fue útil, ¡guárdalo y compártelo con tu equipo! Y si quieres que lo publiquemos como template de proyecto React + Express, dímelo en los comentarios.