CORS (Cross-Origin Resource Sharing) es el mecanismo por el que un navegador decide si una web puede leer la respuesta de una API alojada en otro origen (otro dominio, puerto o protocolo). Sin las cabeceras CORS correctas, el navegador bloquea la lectura por seguridad. Esta herramienta simula esa comprobación del navegador: te explica, sin hacer ninguna petición real y todo en tu navegador, si tu servidor permitiría la llamada y por qué.
Rellena tres cosas:
• Origen (navegador) — la URL de la app que hace la petición (p. ej. https://myapp.com). Es el valor que el navegador enviaría en la cabecera Origin.
• Método HTTP — GET, POST, PUT, DELETE… El método decide si hace falta un preflight.
• Headers de respuesta del servidor — pega las cabeceras que devuelve tu API, una por línea, con formato Nombre: valor (p. ej. Access-Control-Allow-Origin: *). El análisis se actualiza solo mientras escribes.
Hay dos formas de petición cross-origin:
• Petición simple — con GET, POST o HEAD y cabeceras básicas, el navegador la envía directamente y luego comprueba si la respuesta trae Access-Control-Allow-Origin.
• Con preflight — con métodos como PUT, PATCH o DELETE (o cabeceras personalizadas), el navegador manda antes una petición previa de tipo OPTIONS para pedir permiso. La herramienta marca automáticamente cuándo tu método requiere preflight.
El preflight es una petición OPTIONS que el navegador envía antes de la real para preguntar «¿me dejas hacer esto?». En esta herramienta se dispara con los métodos PUT, PATCH, DELETE y OPTIONS. Cuando aparece el aviso, tu servidor debe responder a ese OPTIONS con las cabeceras CORS adecuadas (origen, métodos y cabeceras permitidas); si no, el navegador cancela la petición real aunque tu API funcione. Añadir Access-Control-Max-Age evita repetir el preflight en cada llamada.
Es la cabecera imprescindible: indica qué origen puede leer la respuesta.
• * — permite cualquier origen, pero no funciona con credenciales (cookies).
• Un origen concreto, p. ej. https://myapp.com — solo ese origen, y debe coincidir exactamente con tu Origen (protocolo + dominio + puerto).
Si falta esta cabecera, o el valor no coincide con * ni con tu origen, la petición se bloquea.
Lista los métodos HTTP que el servidor acepta desde otro origen, separados por comas (p. ej. GET, POST, PUT, DELETE). Es relevante sobre todo en el preflight. Si indicas esta cabecera pero no incluye tu método, la herramienta lo señala como problema y bloquea la petición. Si no la pones, el método no se comprueba.
Enumera qué cabeceras de petición puede enviar el cliente (p. ej. Content-Type, Authorization). El navegador la exige en el preflight cuando tu petición manda cabeceras no estándar. Si tu app envía Authorization y aquí no aparece, el navegador bloqueará la llamada.
Con valor true permite enviar cookies y credenciales en la petición cross-origin.
• Ojo, gotcha importante: las credenciales son incompatibles con Access-Control-Allow-Origin: *. Si usas credenciales, el origen debe ser específico (p. ej. https://myapp.com), nunca *. Combinar ambos hace que el navegador rechace la respuesta.
Access-Control-Max-Age indica cuántos segundos puede el navegador cachear la respuesta del preflight (p. ej. 86400 = 24 h), para no repetir el OPTIONS en cada llamada. La herramienta la incluye en los headers sugeridos cuando tu método necesita preflight. Recuerda además añadir Vary: Origin en tu servidor cuando devuelvas un origen concreto, para que las cachés no mezclen respuestas de orígenes distintos.
Tras el análisis verás:
• Un banner verde (permitido) o rojo (bloqueado) con el motivo exacto: falta Access-Control-Allow-Origin, el origen no coincide o el método no está permitido.
• Headers CORS encontrados — cada cabecera detectada con su valor y una explicación.
• Problemas detectados — lo que impide la petición.
• Headers sugeridos — un bloque listo para copiar a la configuración de tu servidor.
Access-Control-Allow-Origin*Permite cualquier origen (no funciona con credenciales)Access-Control-Allow-MethodsGET, POSTMétodos permitidos: GET, POSTAccess-Control-Allow-Origin: https://myapp.com Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization