Configurar Encabezados CORS

Genera configuraciones de Cross-Origin Resource Sharing para Express.js, Nginx, Apache, Fetch API, Spring Boot, Django y Laravel.

Crea y configura encabezados CORS visualmente con un editor interactivo. Define origenes permitidos, metodos, encabezados, credenciales y tiempo maximo; luego exporta configuraciones listas para Express.js, Nginx, Apache, Fetch API, Spring Boot, Django y Laravel. Todo el procesamiento ocurre en tu navegador.

Loading...
Tus datos no salen de tu navegador
¿Te ha sido útil esta herramienta?
Tutorial

Como configurar encabezados CORS

1
1

Definir origenes permitidos

Especifica que dominios pueden acceder a tu API agregando URLs de origen o usando un comodin para acceso abierto.

2
2

Seleccionar metodos y encabezados

Elige que metodos HTTP como GET, POST o PUT estan permitidos, y define encabezados personalizados que tu API acepta.

3
3

Exportar la configuracion

Cambia entre las pestanas de salida para copiar la configuracion CORS para tu framework de servidor o proxy inverso.

Guide

Guia completa de configuracion CORS

Por que CORS existe en el navegador

Los navegadores aplican la politica de mismo origen para evitar que sitios maliciosos lean datos sensibles de otros dominios. CORS relaja esta restriccion de forma controlada permitiendo que los servidores declaren que origenes, metodos y encabezados estan permitidos. Sin encabezados CORS, cualquier fetch o XMLHttpRequest cross-origin sera bloqueado, incluso si el servidor proceso la peticion correctamente.

Entendiendo los encabezados CORS

El encabezado Access-Control-Allow-Origin especifica origenes de confianza. Access-Control-Allow-Methods lista los metodos HTTP permitidos como GET, POST y DELETE. Access-Control-Allow-Headers declara que encabezados de peticion personalizados se aceptan. Access-Control-Expose-Headers controla que encabezados de respuesta puede leer el navegador, y Access-Control-Max-Age cachea resultados preflight para reducir latencia.

Peticiones simples vs preflight

Las peticiones simples usan GET, HEAD o POST con tipos de contenido estandar y omiten el paso preflight. Cualquier peticion que use otros metodos, encabezados personalizados o tipos de contenido no estandar activa una llamada OPTIONS preflight. El servidor debe responder al preflight con los encabezados CORS correctos antes de que el navegador envie la peticion real.

Errores comunes y mejores practicas

Evita usar origenes comodin en produccion; establece una lista blanca de dominios especificos. Nunca combines origenes comodin con credenciales porque los navegadores rechazaran la respuesta. Establece un Max Age razonable para reducir la sobrecarga preflight sin cachear politicas obsoletas. Siempre prueba CORS desde el origen del cliente real.

Examples

Ejemplos de configuracion CORS

API Express.js para una app React

Una SPA React en https://app.example.com necesita llamar a una API Express en https://api.example.com con tokens JWT.

1

Establecer origen permitido a https://app.example.com

2

Habilitar metodos GET, POST, PUT, DELETE

3

Agregar Authorization a los encabezados permitidos

4

Habilitar credenciales

Access-Control-Allow-Origin: https://app.example.com; Access-Control-Allow-Methods: GET, POST, PUT, DELETE; Access-Control-Allow-Headers: Authorization; Access-Control-Allow-Credentials: true

Proxy inverso Nginx para API publica

Una API REST publica detras de Nginx que acepta peticiones JSON desde cualquier origen.

1

Establecer origen permitido a *

2

Habilitar metodos GET, POST, OPTIONS

3

Agregar Content-Type a los encabezados permitidos

4

Establecer edad maxima a 86400 segundos

Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS; Access-Control-Allow-Headers: Content-Type; Access-Control-Max-Age: 86400

Casos de uso

Casos de uso de CORS

API REST publica

Establece los origenes permitidos como comodin (*) y habilita los metodos GET y POST para una API publica. Esto permite que cualquier aplicacion frontend consuma tus endpoints sin restricciones, ideal para servicios de datos abiertos y APIs de documentacion publica.

Backend para aplicacion SPA

Restringe los origenes permitidos al dominio de tu SPA y habilita credenciales para autenticacion basada en cookies. Esto asegura que solo tu frontend pueda llamar a la API manteniendo el estado de sesion en peticiones cross-origin de forma segura.

Gateway de microservicios

Configura multiples origenes permitidos para servicios internos detras de un proxy inverso. Establece metodos especificos y encabezados expuestos para que cada microservicio pueda comunicarse a traves del gateway bloqueando origenes externos no autorizados.

Preguntas frecuentes

?Que es CORS?

CORS es un mecanismo de seguridad del navegador que controla que dominios externos pueden acceder a recursos en tu servidor mediante encabezados HTTP.

?Por que recibo errores de CORS?

Los navegadores bloquean peticiones cross-origin por defecto. Necesitas configurar tu servidor para enviar los encabezados Access-Control-Allow correctos.

?Puedo usar comodin (*) con credenciales?

No. Los navegadores rechazan respuestas que combinan Access-Control-Allow-Origin: * con credenciales. Debes especificar origenes exactos.

?Que es una peticion preflight?

Un preflight es una peticion OPTIONS que el navegador envia antes de ciertas llamadas cross-origin para verificar si el servidor permite la peticion real.

?Que controla Max Age?

Max Age indica a los navegadores cuanto tiempo cachear respuestas preflight en segundos, reduciendo peticiones OPTIONS repetidas al mismo endpoint.

?Mis datos son privados?

Si. Todo se ejecuta localmente en tu navegador. No se envia ningun dato a ningun servidor. Tu configuracion CORS nunca sale de tu maquina.

?Esta herramienta es gratuita?

Si. Completamente gratuita sin limites, sin registro requerido. Genera tantas configuraciones como necesites sin ninguna restriccion.

Ayúdanos a mejorar

¿Qué te parece esta herramienta?

Cada herramienta de Kitmul se construye a partir de peticiones reales de usuarios. Tu valoración y tus sugerencias nos ayudan a arreglar bugs, añadir funciones que faltan y construir las herramientas que realmente necesitas.

Valora esta herramienta

Pulsa una estrella para contarnos lo útil que te ha resultado.

Sugiere una mejora o reporta un bug

¿Te falta alguna función? ¿Has encontrado un fallo? ¿Tienes una idea? Cuéntanoslo y lo revisaremos.

Herramientas relacionadas

Lectura Recomendada

Libros recomendados sobre seguridad web y CORS

Como asociado de Amazon, ganamos con las compras que califican.

Potencia tus Capacidades

Herramientas de seguridad para desarrolladores web

Como asociado de Amazon, ganamos con las compras que califican.

Boletín

Recibe Consejos de Productividad y Nuevas Herramientas Primero

Únete a creadores y desarrolladores que valoran la privacidad. En cada edición: nuevas herramientas, trucos de productividad y novedades — sin spam.

Acceso prioritario a nuevas herramientas
Cancela en cualquier momento, sin preguntas