Watch at EaseHistorias. Respuestas. Perspectiva.

Tecnología · GUÍA PRÁCTICA

¿Falla CORS en el navegador? Separe preflight, respuesta real y contrato de origen

La petición puede fallar antes de llamar a la API, después de un OPTIONS correcto o solo con credenciales. Use pruebas de Network para localizar el salto exacto sin adivinar cabeceras.

Diagrama original de la cadena CORS con OPTIONS, Origin, Allow y Actual.
Ilustración diagnóstica original: compruebe por separado el preflight y la respuesta real. Watch at Ease

Si curl o Postman funciona pero JavaScript muestra un error CORS, trate el intercambio como una cadena. Compruebe por separado si hubo preflight, si la respuesta real es legible y si las credenciales exigen un origen exacto.

Capture la cadena del navegador

Abra Network, conserve el registro y reproduzca el fallo una vez. Determine si el navegador envió OPTIONS, solo la petición real o se detuvo antes de llegar al servidor. Que curl o Postman reciba HTTP solo prueba ese cliente; no demuestra que el navegador exponga la respuesta de otro origen al script.

Audite OPTIONS como intercambio propio

Si aparece OPTIONS, revise petición y respuesta por separado. La petición suele incluir Origin, Access-Control-Request-Method y, si hace falta, Access-Control-Request-Headers. La respuesta debe permitir el origen exacto, el método y las cabeceras pedidas. Una redirección, un reto de autenticación, un fallo de red o una cabecera ausente impiden la petición real.

Audite también la respuesta real

El preflight solo autoriza el envío. La respuesta real, incluso 401, 404 o 500, necesita un Access-Control-Allow-Origin coincidente para que JavaScript la lea. Si el cuerpo es legible pero falta una cabecera personalizada, revise Access-Control-Expose-Headers, no las reglas del preflight.

Pruebe el contrato de credenciales y origen

Con cookies o autenticación HTTP no se puede responder Access-Control-Allow-Origin: *. Se necesita el origen exacto y Access-Control-Allow-Credentials: true. El preflight se envía sin credenciales, por lo que exigir autenticación a OPTIONS bloquea la cadena. CORS tampoco anula SameSite ni las políticas de cookies de terceros.

Revise orígenes dinámicos, caché y middleware

Si el servidor elige el origen permitido dinámicamente, devuelva Vary: Origin para evitar que una caché comparta la respuesta equivocada. Confirme que el middleware CORS cubra OPTIONS y las rutas de error, no solo las respuestas correctas. Verifique el servicio desplegado en Network.

Use una tabla de parada

Sin OPTIONS ni petición real, revise URL, contenido mixto, extensiones, DNS o red. Con solo OPTIONS, repare el preflight. Con ambas pero sin lectura, revise la respuesta real. Si el cuerpo se lee pero faltan cabeceras, exponga únicamente las cabeceras de respuesta necesarias.

Diagrama original que compara credenciales, comodín, origen exacto y Vary Origin.
Ilustración diagnóstica original: las credenciales requieren un origen permitido exacto. Watch at Ease