Domina el Intercambio de Recursos de Origen Cruzado de una vez por todas.
🚀 Demo en vivo: https://cors-visualized.lvrpiz.com
CORS Visualized es la herramienta educativa interactiva definitiva para desarrolladores, estudiantes y entusiastas de la seguridad. Deja de adivinar por qué fallan tus peticiones y empieza a visualizar el saludo invisible entre tu navegador y el servidor.
cors_visualized.mov
CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad del navegador que restringe las peticiones HTTP de origen cruzado. Es la razón por la que tu frontend en localhost:3000 no puede hablar simplemente con tu backend en api.ejemplo.com sin permiso explícito.
Esta herramienta convierte cabeceras abstractas y documentación árida en un patio de recreo visual e interactivo.
Diseña tus propios escenarios de Cliente vs Servidor. Ajusta el Origen, Métodos, Cabeceras y Credenciales en tiempo real y observa cómo se despliega la lógica de decisión del navegador.
Pon a prueba tus habilidades con 5 niveles de dificultad creciente:
- El Bloqueo Básico: Soluciona desajustes simples de origen.
- Método Desconocido: Maneja peticiones Preflight para DELETE/PUT.
- Credenciales Cruzadas: Domina las reglas complejas de
Access-Control-Allow-Credentials. - Cabeceras Personalizadas: Aprende a permitir API Keys (
X-Api-Key). - Nivel Experto: Expón cabeceras ocultas (
Access-Control-Expose-Headers) al frontend.
Recibe feedback instantáneo sobre tu configuración. La herramienta analiza tu configuración en busca de vulnerabilidades comunes:
- Uso de comodín (
*) con Credenciales. - Exposición excesiva de cabeceras sensibles.
- Configuraciones de caché
Max-Ageinseguras.
No solo lo aprendas, impleméntalo. Genera configuraciones CORS listas para producción para tu stack tecnológico:
- Node.js (Express)
- Python (FastAPI)
- Java (Spring Boot)
- Go (Gin)
- C# (ASP.NET Core)
- Infraestructura: Nginx, Apache, AWS S3, Vercel, Next.js.
Clona el repositorio y ejecútalo localmente para experimentar sin necesidad de acceso a internet.
# Clona el repositorio
git clone https://github.com/alvarogarciapiz/cors-visualized.git
# Entra en el directorio
cd cors-visualized
# Instala las dependencias
npm install
# Inicia el servidor de desarrollo
npm run devConstruido con cariño y estándares web modernos:
- React 18 (Librería de UI)
- Vite (Herramienta de construcción ultrarrápida)
- Tailwind CSS (Estilos utility-first)
- Framer Motion (Animaciones fluidas)
- Lucide React (Iconos hermosos)
¡Las contribuciones son bienvenidas! Ya sea un nuevo nivel de desafío, una traducción o la corrección de un bug. Por favor lee CONTRIBUTING.md para más detalles.
Este proyecto está licenciado bajo la Licencia MIT. Consulta el fichero LICENSE para más detalles.
- Creado por @lvrpiz.
- Basado en un artículo de The Bulletin Newsletter.
- Echa un vistazo a mi web: lvrpiz.com.
CORS, Intercambio de Recursos de Origen Cruzado, Seguridad Web, Herramientas de Desarrollador, Educativo, React, Simulación Interactiva, Política CORS, Desarrollo Frontend, Configuración Backend, Express, FastAPI, Spring Boot, Nginx, Apache, AWS S3, Vercel, Next.js, Desarrollo Web, Cabeceras HTTP, Petición Preflight, SOP, Política de Mismo Origen.