¿Qué es CORS y cómo solucionarlo?
CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado en los navegadores web para proteger a los usuarios de posibles ataques de suplantación de identidad y robo de información. Cuando un navegador solicita recursos (como archivos, datos, o servicios) desde un servidor que está en un dominio diferente al de la página web original, CORS verifica si el servidor permite que la solicitud se complete.
Si el servidor no permite la solicitud, el navegador bloqueará el acceso al recurso y mostrará un mensaje de error en la consola del desarrollador. Esto puede causar problemas al crear aplicaciones web que necesiten acceder a recursos de otros servidores, como APIs externas o servicios de terceros.
Afortunadamente, CORS se puede solucionar fácilmente desde el lado del servidor. Aquí te mostramos algunas maneras de solucionar los problemas de CORS:
1. Configurar el servidor para permitir solicitudes CORS
La forma más común de solucionar los problemas de CORS es configurar el servidor para permitir solicitudes CORS. Esto se hace agregando encabezados CORS a las respuestas del servidor. Los encabezados CORS incluyen Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, y otros que especifican qué dominios pueden acceder al recurso, qué métodos de solicitud están permitidos, y qué encabezados pueden ser incluidos en la solicitud.
2. Usar un servidor proxy
Otra manera de solucionar los problemas de CORS es usar un servidor proxy para reenviar las solicitudes del cliente al servidor externo y devolver la respuesta al cliente. Esto evita que el cliente haga la solicitud directamente al servidor externo, lo que puede evitar problemas de CORS.
3. Habilitar CORS en el servidor de destino
Si tienes acceso al servidor de destino, una solución más permanente es habilitar CORS directamente en el servidor. Esto puede hacerse configurando el servidor para que incluya los encabezados CORS en todas las respuestas, permitiendo que cualquier dominio acceda a los recursos del servidor.
En resumen, CORS es un mecanismo de seguridad importante que protege a los usuarios de posibles ataques, pero puede causar problemas al desarrollar aplicaciones web. Afortunadamente, existen varias maneras de solucionar los problemas de CORS, ya sea configurando el servidor, utilizando un servidor proxy, o habilitando CORS en el servidor de destino.
Te admiro mucho bro, gracias por el buen contenido
terrrrrible gracias!
excelente explicación, muchas gracias!!!!!
quiero colocar un iframe en video hls y me sale error de cors , resulta que el video no funciona en https y no logro incrustrarlo en mi paguina alguna ayuda
Todo lo que necesitaba. Siempre me tocaba usar CORS Anywhere sin saber el motivo. Ahora ya todo claro, configuraré las cabeceras desde mi backend. Muchas gracias crack.
Que procede cuando solo hice un proyecto react de front end usando una API que no es mía? No puedo moverle al servidor
Fas te amo
TE AMO MEN
maldito cors jajajaja🤣
Y si la request es a un endpoint al que no tengo acceso al código? Es decir, no tengo acceso al backend
Hola ,una consulta ,quiero inpeccionar una web,pero apenas apretó (f12) me redicciona , eso como puedo solucionarlo?🙏🏼
Muchas gracias Fazt, eres un grande, me habría venido bien ver este video hace 2 días que tuve problemas en proyecto justamente por el CORS, pero bueno, con el video me ha quedado súper claro ese tema. ❤
Que solución habría si no tengo control del backend?. Me pasa por ejemplo al tratar de leer imagenes de cualquier otro dominio, y en mi frontend (React) no puedo debido al CORS
Gracias Fazt, imposible explicarlo mejor para entenderlo mejor que nunca como que hay un "prefech options" jeje 🙂
gracias man sos un capo
Ame esos ejemplos en varios lenguajes 👍
Qué crack, de este tema tenía conocimientos básicos y desconocía muchas cosas más, pero aprendí todo lo que desconocía 😁😁
Buenisimo!!!, hace poco me paso que copie el link de varias imágenes de una pagina para mostrarlas en un componente de React y no me dejaba, creí que era un error mío con algún useEfect que me falto pero era un error de cors y como era una página a donde no podía acceder al código del backend no me quedo otra que literalmente descargarlas y usarlas
Que consola usas en powershell
Como siempre un increíble vidio xd btw me encantaría uno de CMS headless que es un tema del que no he escuchado tanto y lo veo muy interesante