# Qué es CORS y por qué el navegador bloquea una API

> Cuando una página pide datos a otro origen, el navegador aplica una regla de seguridad. El servidor debe autorizar esa lectura con encabezados HTTP concretos.

- URL canónica: https://visteesto.com/nota/que-es-cors-por-que-bloquea-navegador
- Autor: [Martin Rodriguez](https://visteesto.com/autor/martin-rodriguez)
- Publicado: 2026-09-18T21:00:00.000Z
- Actualizado: 2026-09-18T21:00:00.000Z
- Sección: Tecnología
- Tema: cors-programacion
- Idioma: es
- Consulta principal: qué es CORS y por qué el navegador bloquea una API

## Resumen verificable

- CORS usa encabezados HTTP para que un servidor indique qué orígenes pueden leer recursos desde el navegador. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS))
- El navegador restringe solicitudes entre orígenes iniciadas por scripts salvo que la respuesta autorice el acceso. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS))
- El preflight usa OPTIONS para consultar métodos y encabezados permitidos antes de ciertas solicitudes. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS))
- Las reglas de CORS forman parte del estándar Fetch que usan los navegadores para solicitudes de red. ([evidencia](https://fetch.spec.whatwg.org/))

## Aporte editorial de VisteEsto

VisteEsto separa la decisión del navegador, la autorización del servidor y una ruta concreta para leer un error de CORS.

## Qué es CORS y quién toma la decisión

CORS, por Cross-Origin Resource Sharing, es un mecanismo basado en encabezados HTTP. Permite que un servidor indique qué origen distinto puede leer una respuesta desde un navegador. Un origen combina esquema, dominio y puerto: cambiar cualquiera de esos elementos puede convertir una solicitud en una petición entre orígenes.

El navegador aplica CORS a solicitudes iniciadas por JavaScript, como fetch o XMLHttpRequest. La API puede recibir y responder la solicitud, pero si no incluye el permiso adecuado, el navegador no entrega esa respuesta al código de la página. Por eso cambiar solo el frontend no resuelve un error de CORS.

## Cuándo aparece la solicitud OPTIONS

Para ciertas solicitudes, el navegador envía antes una petición OPTIONS llamada preflight. Allí anuncia el método y los encabezados que planea usar. El servidor responde si autoriza ese origen, método y encabezados; recién entonces el navegador puede enviar la solicitud principal.

No todas las peticiones entre orígenes hacen preflight. Una solicitud con condiciones más simples puede ir directamente, aunque el servidor aún debe autorizar que el script lea su respuesta mediante Access-Control-Allow-Origin. Los detalles dependen del método, Content-Type y encabezados usados.

## Guía para diagnosticar un error de CORS

Primero comprobá en la consola del navegador el origen de la página y la URL de la API. Después revisá la respuesta de la API o del preflight: Access-Control-Allow-Origin debe coincidir con el origen permitido. Si hay métodos o encabezados no simples, verificá también Access-Control-Allow-Methods y Access-Control-Allow-Headers.

No uses un comodín para resolver a ciegas un caso con credenciales. Las solicitudes que incluyen cookies o autenticación requieren reglas más precisas: el servidor debe especificar el origen y permitir credenciales de forma explícita. CORS controla qué puede leer el navegador, pero no reemplaza autenticación, autorización ni validación en el servidor.

## Fuentes consultadas

- Fuente secundaria: [MDN: Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS)
- Fuente primaria: [WHATWG: Fetch Standard](https://fetch.spec.whatwg.org/)
- Fuente primaria: [web.dev: Cross-Origin Resource Sharing](https://web.dev/articles/cross-origin-resource-sharing)

## Imágenes y licencias

- Navegador y servidor separados por una puerta de seguridad CORS. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/que-es-cors-por-que-bloquea-navegador).
- Secuencia de preflight OPTIONS, permiso y solicitud principal. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/que-es-cors-por-que-bloquea-navegador).
- Origen, navegador y servidor en un diagrama de autorización CORS. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/que-es-cors-por-que-bloquea-navegador).

## Cómo citar

Citar título, autor, fecha de publicación o actualización y la URL canónica. Las afirmaciones centrales incluyen su evidencia directa arriba. Esta versión Markdown es una representación accesible; la nota HTML canónica es la fuente editorial de referencia.