chrome · JavaScript
El mensaje
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Qué significa
La petición llegó al servidor y volvió una respuesta, pero esa respuesta no traía ninguna cabecera que permita este origen, así que el navegador se negó a entregársela a tu JavaScript. Solo los navegadores aplican esta regla, y por eso la misma URL funciona desde curl: parece que el servidor está bien y que solo el navegador falla. El arreglo vive siempre en el servidor: añade Access-Control-Allow-Origin: http://localhost:3000 a la respuesta. El frontend no puede hacer nada, y si el servidor no es tuyo, pasar la llamada por uno propio es el único camino. Allow-Origin: * no sirve para peticiones que envían cookies; esas necesitan el origen exacto y además Allow-Credentials.
El arreglo
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- Lo imprime
- chrome
- JavaScript
- 15
Los errores del navegador y de Node suelen decirte qué se rompió y no por qué el valor llegó a ser así —leíste undefined, no era una función, no era JSON—, así que el lugar del arreglo está aguas arriba de la línea que lanzó el error, y silenciar solo esa línea con ?. y valores por defecto hace que el mismo problema reaparezca más lejos y con una forma más difícil de reconocer.
Cómo leer un mensaje de error
- Lee desde la primera línea. Cuanto más abajo, más son las tripas de la herramienta; la causa suele estar arriba.
- Si hay un archivo y un número de línea, empieza ahí: no el marco superior de la pila, sino la línea más alta que nombre un archivo tuyo.
- Busca el mensaje literal, pero quita antes tus rutas y nombres de variables: eso es lo que impide que la búsqueda coincida.
- La misma condición se redacta distinto según la versión. Si los resultados no cuadran, añade el número de versión.
- Antes de pegar un arreglo, comprueba qué descarta. Algunos no se pueden deshacer.
Preguntas frecuentes
Q. ¿Qué significa «Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.»?
La petición llegó al servidor y volvió una respuesta, pero esa respuesta no traía ninguna cabecera que permita este origen, así que el navegador se negó a entregársela a tu JavaScript. Solo los navegadores aplican esta regla, y por eso la misma URL funciona desde curl: parece que el servidor está bien y que solo el navegador falla. El arreglo vive siempre en el servidor: añade Access-Control-Allow-Origin: http://localhost:3000 a la respuesta. El frontend no puede hacer nada, y si el servidor no es tuyo, pasar la llamada por uno propio es el único camino. Allow-Origin: * no sirve para peticiones que envían cookies; esas necesitan el origen exacto y además Allow-Credentials.
Q. ¿Cómo se arregla?
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data — antes de ejecutarlo, mira arriba qué descarta este comando.
Q. ¿Qué herramienta lo imprime?
chrome. Está en JavaScript y el mensaje tiene 23 palabras.