En este artículo
Que es CORS?
Cross-Origin Resource Sharing (CORS) es un mecanismo de seguridad del navegador que controla que origenes web pueden acceder a los recursos de su servidor. Por defecto, los navegadores aplican la politica del mismo origen, bloqueando las solicitudes JavaScript a un dominio, puerto o protocolo diferente.
Las cabeceras CORS indican al navegador que solicitudes entre origenes permitir. Sin las cabeceras correctas, las llamadas API desde un frontend en un dominio a un backend en otro fallaran con un error CORS. Un generador de cabeceras CORS crea las cabeceras Access-Control-Allow-* correctas.
Como funcionan las cabeceras CORS
CORS funciona mediante un conjunto de cabeceras de respuesta HTTP que el servidor envia para indicar que origenes, metodos y cabeceras estan permitidos.
- Access-Control-Allow-Origin — especifica que origenes pueden acceder al recurso (un dominio especifico o * para cualquier origen)
- Solicitudes preflight — para solicitudes no simples, los navegadores envian primero una solicitud OPTIONS para verificar si la solicitud real esta permitida
- Manejo de credenciales — Access-Control-Allow-Credentials: true permite cookies y cabeceras de autenticacion, pero requiere un origen especifico
Pruébalo gratis — sin registro
Generar cabeceras CORS →Cuando configurar CORS
La configuracion CORS es necesaria cuando su frontend y backend se sirven desde origenes diferentes.
- Desarrollo de API — las API REST o GraphQL accedidas por apps frontend en diferentes dominios necesitan cabeceras CORS
- Configuracion CDN — servir activos estaticos desde un subdominio CDN requiere CORS para archivos de fuentes y solicitudes API
- Microservicios — servicios ejecutandose en diferentes puertos durante el desarrollo local necesitan CORS para comunicarse a traves del navegador
Preguntas frecuentes
Por que no puedo usar Access-Control-Allow-Origin: * para todo?
El comodin * permite cualquier origen, lo cual esta bien para APIs publicas. Sin embargo, no puede usarse con credenciales (cookies, cabeceras Authorization). Si su API requiere autenticacion, debe especificar el origen exacto.
Que es una solicitud preflight?
Un preflight es una solicitud HTTP OPTIONS que el navegador envia automaticamente antes de la solicitud real. Verifica si el servidor permite el metodo, las cabeceras y el origen.
Como corrijo el error 'No Access-Control-Allow-Origin header'?
Agregue la cabecera Access-Control-Allow-Origin a la respuesta de su servidor con el dominio del origen solicitante. Para Express use el middleware cors, para Nginx agregue directivas add_header.