Cómo conectar una web con una API

Introducción

Aprender a conectar una web con una API te permite consumir datos remotos, enviar formularios, autenticar usuarios y orquestar servicios. Aquí encontrarás desde la primera petición en el navegador hasta cómo proteger claves y desplegar un proxy seguro. Al final tendrás ejemplos prácticos en vanilla JS, React y Node/Express, más snippets para PHP y Python.

Requisitos previos

Antes de empezar asegúrate de conocer HTML básico, JavaScript y conceptos de HTTP (GET/POST) y JSON. Ten estas herramientas listas:

• Navegador con DevTools
• Editor (VS Code)
• Node.js (opcional)
• Postman o Insomnia
• Acceso a una API de prueba (JSONPlaceholder, httpbin)

Conceptos clave

Mantén claras estas ideas para no perder tiempo:

• Endpoints: URL y rutas que ofrecen recursos.
• Métodos HTTP: GET, POST, PUT, DELETE y códigos 200/201/400/401/403/404/500.
• JSON: parseo con JSON.parse y validación mínima.
• CORS: políticas del navegador controladas por cabeceras Access-Control-Allow-*.
• Autenticación: API keys, Bearer/JWT, OAuth2; mover lógica sensible al servidor.

Tutorial paso a paso (guía numerada)

1. Preparar entorno: crea carpeta, package.json si usarás backend; estructura reproducible.
2. Probar con Postman: pide un GET público, inspecciona cabeceras y cuerpo.
3. GET en vanilla JS: usar fetch(url).then(res=>res.json()).then(data=>render(data)).
4. Manejo de errores y timeouts: comprobar response.ok, .catch() y usar AbortController para cancelar.
5. POST con fetch/Axios: enviar JSON con Content-Type: application/json y manejar 201/400.
6. Autenticación con token: enviar Authorization: Bearer <token> y validar; evita guardar tokens críticos en localStorage.
7. Ocultar API keys: usa variables de entorno y un proxy server para no exponer claves.
8. Resolver CORS: añadir Access-Control-Allow-Origin en servidor o usar proxy en desarrollo.
9. Proxy con Node/Express: ruta /api/proxy que reenvía a la API remota y lee keys de process.env.
10. Paginación y límites: leer headers de paginación, implementar carga incremental y backoff ante rate limits.
11. Testeo y depuración: Postman, DevTools Network, logs en backend y pruebas con Jest/Supertest.
12. Despliegue: mover secrets a variables de entorno, forzar HTTPS y añadir monitorización.

Comparativa rápida: REST vs GraphQL

Ejemplos prácticos por stack

• Vanilla JS: fetch GET + AbortController + render DOM.
• Axios: interceptores para inyectar Authorization y manejo centralizado de errores.
• React: useEffect para peticiones y custom hook useApi(endpoint, opts).
• Vue: composable con setup(), ref y gestión de estados.
• jQuery: $.getJSON para proyectos legacy y migración a fetch.
• Node/Express: proxy /api/* que reenvía y oculta API keys.
• PHP: cURL para GET/POST y cabeceras JSON.
• Python: Flask como proxy y cliente con requests.

Solución de problemas comunes

• CORS: habilita cabeceras en servidor o usa proxy.
• 401/403: revisar token, scopes y expiración.
• 500: retries con exponential backoff y fallback amigable.
• JSON parse error: comprobar Content-Type y envolver parseo en try/catch.
• Timeouts: configurar timeouts y mostrar estado de carga.

Buenas prácticas de seguridad y rendimiento

• No incluir API keys en frontend; usar proxy y variables de entorno.
• HTTPS obligatorio y Content Security Policy.
• Principio de menor privilegio y rotación de claves.
• Cachear respuestas cuando sea posible (HTTP cache, SWR, Service Worker).
• Retries exponenciales y respetar límites de uso.

Testing, depuración y monitorización

Combina pruebas manuales con colecciones de Postman, tests automáticos (Jest, Supertest) y monitorización en producción (Sentry, Datadog). Simula cargas con k6 o Artillery antes de escalar.

Checklist de despliegue y mantenimiento

• Secrets en variables de entorno en hosting.
• Revisar CORS y CSP.
• Configurar circuit breakers, límites y alertas.
• Documentar endpoints y procesos para regenerar credenciales.

Recursos, plantillas y ejemplos descargables

Búscate un repositorio con frontend vanilla, demo en React y proxy en Node. Usar CodeSandbox o StackBlitz acelera pruebas sin instalar nada. Incluye snippets de fetch, Axios interceptor, Express proxy y comandos cURL.

FAQ

• ¿Cómo soluciono errores CORS? Habilita Access-Control-Allow-Origin en el servidor o usa un proxy que haga la solicitud desde backend.
• ¿Dónde guardar API keys? En variables de entorno del servidor; nunca en código cliente público.
• Fetch vs Axios Fetch es nativo y ligero; Axios añade interceptores, cancelación y transformación más sencilla.
• ¿Renovación de tokens? Implementa refresh tokens en backend y flujos para renovar antes de expiración.
• Paginación y límites Lee headers de paginación, usa carga incremental y retries con backoff para respetar rate limits.
• 401/403 Revisa token, scopes, reloj del servidor (drift) y permisos en la API.
• Proxy con Node/Express Crea rutas que reenvíen solicitudes, lean API key desde process.env y reemplacen cabeceras sensibles.
• GraphQL desde frontend Sí, se consume con POST al endpoint GraphQL; requiere manejo distinto de queries y caching.
• Pruebas en local Usa Postman, ngrok para exponer localmente y proxies de desarrollo de frameworks.
• Medidas antes de producción HTTPS, secrets en entorno, límites y monitorización activa.

A tener presente: no hay una sola forma correcta; selecciona la arquitectura que facilite seguridad, mantenimiento y buena experiencia de usuario.