El contrato
El frontend y el backend son dos programas independientes, a menudo escritos por personas distintas. Para entenderse, acuerdan un contrato: qué rutas existen, qué reciben y qué forma tienen los datos que devuelven.
GET /api/usuarios
→ 200 [ { "id": 1, "nombre": "Ana" }, { "id": 2, "nombre": "Luis" } ]
Si el backend cambia nombre por name, el frontend deja de funcionar
aunque ningún archivo del frontend se haya tocado. El contrato es frágil:
las dos mitades dependen de respetar exactamente las mismas formas.
JSON: el idioma común
Por HTTP solo viaja texto. JSON (JavaScript Object Notation) es el formato estándar para serializar objetos a texto y volver a reconstruirlos:
- El backend hace
JSON.stringify(datos)y lo envía como cuerpo. - El frontend recibe el texto y hace
await respuesta.json()para recuperarlo.
Por eso solo se pueden enviar tipos que JSON entiende (objetos, arrays, strings,
números, booleanos, null): nada de funciones ni fechas como objeto Date.
Códigos de estado
Cada respuesta HTTP trae un código de estado que dice cómo fue:
- 2xx — éxito.
200 OK,201 Created(algo se creó). - 4xx — error del cliente.
400(petición mal formada),401(no autenticado),403(sin permiso),404(no existe). - 5xx — error del servidor.
500(algo falló en el backend).
⚠️ Cuidado:
fetchNO lanza error con un 404 o un 500. Solo falla si la red se cae. Por eso hay que mirarrespuesta.ok(true si el estado es 2xx) orespuesta.statuspara detectar errores de servidor.
CORS: por qué el navegador bloquea otros orígenes
Un origen es la combinación de protocolo + dominio + puerto
(https://miapp.com). Por seguridad, el navegador aplica la same-origin
policy: por defecto, una página de miapp.com no puede leer la respuesta
de una API en otra-api.com. Esto impide que una web maliciosa lea datos de
otra en tu nombre.
CORS (Cross-Origin Resource Sharing) es la forma en que el servidor da permiso explícito. Cuando la API quiere ser consumida desde otro origen, responde con una cabecera:
Access-Control-Allow-Origin: https://miapp.com
El navegador la ve y permite que tu código lea la respuesta. Si esa cabecera falta, la petición sale, pero el navegador bloquea la lectura y verás el típico error de CORS en la consola.
Clave: CORS lo concede el backend, no el frontend. Es el servidor quien decide qué orígenes pueden leer sus datos.