🤬 CORS ¿Qué son los CORS? ¿Cómo funcionan? ¿Cómo solucionar el problema de CORS?
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- 👉🏼 Más contenido: • ¿Sabes cómo resolver p...
🔥 🔥 CORS🔥🔥
En el video de hoy voy abordar un tema que frecuentemente escucho en las diversas comunidades de programadores y es sobre un error muy común el CORS, es importante aprender a entender este error por su frecuencia y porque la solución es mas sencilla de lo que parece.
Control de accesos HTTP o CORS ¿Qué son los CORS? ¿Cómo funcionan? ¿Cómo solucionar el problema de CORS?
Si estás empezando a programar, o si quieres fortalecer tus conocimientos te doy la bienvenida a este canal.
Aquí hablamos angular desde cero, node, mongo, de frontend de backend, problemas reales de un programador y soluciones que se aplican en el día a día.
Aquí vas a encontrar tutorías de angular, tutoriales de node, juntos llevaremos a la práctica ejercicios reales, así que venga y le cuento.
Si aún no estás suscrito y este contenido gusta 👉 / @leifermendez
👋 𝐂𝐔𝐑𝐒𝐎𝐒 𝐆𝐑𝐀𝐓𝐈𝐒
├ 0️⃣ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ leifermendez.g...
├ 1️⃣ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 desde cero ⮕ bit.ly/367tJ32
├ 2️⃣ 𝙉𝙊𝘿𝙀 Express desde cero ⮕ bit.ly/3od1Bl6
├ 3️⃣ 𝙈𝙊𝙉𝙂𝙊𝘿𝘽 desde cero ⮕ bit.ly/3qh35wK
└ 4️⃣ 𝙎𝙊𝘾𝙆𝙀𝙏.𝙄𝙊 desde cero ⮕ bit.ly/3pg1Q02
🤑 𝐂𝐔𝐑𝐒𝐎𝐒 𝐏𝐀𝐆𝐎𝐒
└ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 principiantes ⮕ link.codigoenc...
🚀 𝐂𝐎𝐌𝐔𝐍𝐈𝐃𝐀𝐃 𝐘 𝐆𝐑𝐔𝐏𝐎𝐒 𝐃𝐄 𝐄𝐒𝐓𝐔𝐃𝐈𝐎
├ 𝙎𝙐𝙎𝘾𝙍𝙄𝘽𝙀𝙏𝙀 ⮕ / @leifermendez
├ 𝙈𝙄𝙀𝙈𝘽𝙍𝙊𝙎 ⮕ / @leifermendez
└ 𝙏𝙀𝙇𝙀𝙂𝙍𝘼𝙈 ⮕ t.me/leifermendez
🏆 𝐌Á𝐒 𝐂𝐎𝐍𝐓𝐄𝐍𝐈𝐃𝐎
├ 𝙎𝙋𝙊𝙏𝙄𝙁𝙔 ⮕ spoti.fi/3vnrvqg
├ 𝙔𝙊𝙐𝙏𝙐𝘽𝙀 ⮕ / leifermendez
├ 𝙄𝙉𝙎𝙏𝘼𝙂𝙍𝘼𝙈 ⮕ / leifermendez
├ 𝘽𝙇𝙊𝙂 ⮕ www.codigoenca...
└ 𝙁𝘼𝘾𝙀𝘽𝙊𝙊𝙆 ⮕ / leifermendez.dev
💰 𝐏𝐑𝐎𝐌𝐎𝐂𝐈𝐎𝐍𝐄𝐒 𝐘 𝐃𝐄𝐒𝐂𝐔𝐄𝐍𝐓𝐎𝐒
├ 𝙃𝙊𝙎𝙏𝙄𝙉𝙂 Aprovéchate del descuento) ⮕ bit.ly/hosting...
├ 𝙑𝙋𝙉 (3 meses gratis de servicio) ⮕ bit.ly/vpn-lei...
└ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊 ⮕ link.codigoenc...
🧠 𝐑𝐄𝐏𝐎𝐒𝐈𝐓𝐎𝐑𝐈𝐎 𝐘 𝐂𝐎𝐃𝐈𝐆𝐎𝐒
└ 𝙂𝙄𝙏𝙃𝙐𝘽 ⮕ github.com/lei...
✉️ 𝐂𝐎𝐍𝐓𝐀𝐂𝐓𝐎
└ 𝙈𝘼𝙄𝙇 ⮕ leifer.contacto@gmail.com
⬇️⬇️⬇️⬇️ MAS CURSOS ⬇️⬇️⬇️⬇️
Dinámica:"Descubre el BUG al momento de instalar los cors y comenta el minuto exacto 🤦♂️"
Hoy aprenderemos como funcionan los cors, porque me bloquean los cors, y como solucionar el problema de cors funciona para Angular, React, Vue y cualquier framework
Si el contenido de esta lección te gusta recuerda suscribirte al canal, compartirlo, dejar una manito arriba y activar la campanita para que youtube te avise cuando subo un nuevo video.
Conviértete en miembro de este canal para disfrutar de ventajas:
/ @leifermendez
0:00 Intro
#leifermendezAngular #leifermendezNode #leifermendezSocket Espero que te guste mucho el vídeo 😄
├ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ leifermendez.github.io/#/
├ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 desde cero ⮕ bit.ly/367tJ32
├ 𝙉𝙊𝘿𝙀 Express desde cero ⮕ bit.ly/3od1Bl6
├ 𝙈𝙊𝙉𝙂𝙊𝘿𝘽 desde cero ⮕ bit.ly/3qh35wK
├ 𝙎𝙊𝘾𝙆𝙀𝙏.𝙄𝙊 desde cero ⮕ bit.ly/3pg1Q02
└ 𝙉𝙂𝙍𝙓 𝙙𝙚𝙨𝙙𝙚 𝘾𝙀𝙍𝙊 ⮕ link.codigoencasa.com/NODE
justamente habia creado mi API y me tope con esto de los lista de control de origenes con cors, excelete
¡Muy buen video! Una cosa, creo que sería genial, si dejaras un link donde poder ver el código desarrollado en este vídeo; y así poder comparar, analizar y aprender. Gracias y saludos cordiales!
Eres un Crack, CORS el dolor de cabeza cuando accedes a una api desde front, EXCELENTE EXPLICACIÓN
Hola! Muchas gracias es un tema que día día vemos y pero no sabemos cómo funciona 😁😁
jajja y yo ponia toda la configuracion de cors de accept GET POST y asi, eso de poner listas de origener no me lo sabia, esta increible asi, mil gracias
Que tal Juan síii me alegra que te guste
Grande ! Sencillo, rápido al punto y sin tanta carreta.
Puedes hacer o recomendar un video explicando como enviar un token desde angular y que el backend lo valide, por favor
Hola, gracias por el video. Soy Front (apenas iniciando) y me saliá ese error, todo este tiempo pensé que no estaba implementando algo bien y ahora entiendo que es culpa de Back... esos mendigos de Back!!! jajaja
HERMANO, muchísimas gracias por estos videos así!! Cuando estas recién empezando con el tema APIs y ves la documentación oficial hay muchas cosas que no terminas de entender por tu cuenta, por después de ver estos videos vuelvo a leer la documentación y parece que esta escrita en otro idioma! Gracias por hacer las cosas mas sencillas para todos!!!
PD: implemente tu curso sobre whatsapp-bot para mi local gastronómico y fue todo un éxito!! compartí tu video en todos lados!!! ^^
Saludos que buen comentario 😃😃 bienvenido a esta comunidad
La mejor explicación que he visto. Muchas gracias por este increíble video!
Gracias a JMV por formar parte de esta comunidad
Más que excelente!!! te doy 200,000 estrellas, la mejor explicación que he visto y además con el verdadero conocimiento.
Gracias por comentar y formar parte de esta comunidad
Simplemente mejor que Pedrito mágico...
Muy claro todo! Puede parecer algo simple pero a veces es necesario entender cómo funciona todo y el porqué de ciertos métodos al momento de programar!
Excelente vídeo, super clara explicación y ejemplo.
muchas gracias.
Muchas gracias por el vídeo, he solicionado el error que tenía. Muy bien explicado!!
Te amo neneeeee, gracias, impresionante videooo!
Amigo, eres un crack, algún día como vos ❤
Excelente explicación. Bastante sencilla y breve.
Super claro y si! es un problema muy común. Ma ayudaste mucho!!!! Saludos 🤓✌
Saludos Fer espero te sea. De utilidad
Clarisimo el video. Muchas Gracias. Saludos!
muy completa la informacion, muchas gracias.!!
Justo lo que necesitaba, todo muy claro.
Muy didáctico la explicación muchas gracias.
GRACIAS POR TU VIDEOOOOO!!!!!!, ME SALVASTE DE UN PROBLEMA PARA LA ENTREGA DE PROYECTO 🥲🥲🥲
Excelente noticia! gracias por comentar y compartir
Hola, gracias por tu video. Si tienes el front corriendo en localhost:4200 y el back en localhost:3000, en estricto rigor lo único que esta distinto es el puerto, porque el dominio = localhost es el mismo para ambos, y sin embargo igual te da el error de CORS, lo que contadice tu premisa de que "front y back deben estar corriendo en el mismo dominio para que no dé error de CORS". Mejor dicho dominio y puerto deben ser los mismos para que no hubiese error de CORS. Una consulta: Esto siempre lo he visto en desarrollos locales, pero ¿es posible tener problemas de CORS en produccion?
Si en producción es el mismo comportamiento con respecto a tu pregunta el hecho de cambiar el puerto para el navegar es como si fueran dos dominios diferentes (son fuentes de origin diferentes)
@@LeiferMendez Muchisimas gracias. Sí, creo que efectivamente el puerto tambien se toma como que forma parte del dominio
Muchas gracias!!! me ayudó un montón y super bien explicado!! ^^
claro y sencillo.
Buen video, el unico que me ha funcionado despues de muchos, eres grande
Videos así valen la pena verlos completos, con anuncios incluidos
buenas, como lo soluciono si estoy trabajando en angular? en que archivo hago la modificacion que se hace en el video?
como hago eso para paginas estaticas? sin usar un sevidor ni la libreria CORS
Unas preguntas. ¿Porque cuando consumo la API sin necesidad de poner el "cors()" en el desarrollo de esta misma, cuando la consumo con PostMan, no tengo ningun problema? ¿Porque cuando envio datos a travez de "submit" si se envian y por Fetch da problemas de "cors"? Saludos :D
eso es pq los probelmas de cors solo pasan entre back y front, cuando usas postman, estas back con back
@@leandropugliese5315 entonces si la envio por "submit" desde el front si se envia, pero por fetch da problemas de cors?
@@thereciolol2733 claro, digamos lo que viaje front a front cómo por ejemplo un formulario, y lo muestres directo no va a tener problema, y si es back a back tampoco, el cors es como una barrera para que no cualquiera pueda usar una api para su front sin autorización
Cuando la petición de acceso a la API se realiza dentro del contexto del navegador se le aplican las restricciones de CORS, en cambio si se hace desde un código que corre en el backend o en el desktop (no en el browser), no se le aplica la política de CORS. Esa es la razón por la cual el CLI de Postman funciona sin problemas para consumir una API.
Muy buen video 🤘
Excelente video !! . Muy clara la explicación 😃
Gracias Nicolas por formar parte de esta comunidad
Bastante bueno, like y suscrito.
Gracias! 😊
Bienvenido a este canal!
Eres un crack amigo, tu fiel seguidor y espero a tu lado crecer montones en este mundo!
Gracias Oscar aqui estaremos aprendiendo todos un monton! se vienen cosas nuevas :)
Guaoooo!!! es excelente
Grande master me sirvio mucho me aseguraste un 7 en aplicaciones moviles
Leifer, sos un crack al poder compartir esto entre otros conocimientos!!, felicitaciones!!!!
Gracias Javier!
que buena explicación, gracias!
muuy buen video !
Estupendo, muy bien explicado, muchas gracias!. Me surgen dos preguntas, ¿por que el CORS aplica a navegadores y no a API testers? por ejemplo: Postman. Si es "una capa de seguridad" ésta puede ser vulnerada por este medio. Anidada a la primera pregunta, la segúnda es: ¿como hacen estos API testers?, infiero que son un mundo aparte en cuanto a cabeceras se trata con respecto de los navegadores, pero sería interesante explicar sus diferencias. c: saludos
Exactamente, Postman recibe sin probleas, con la misma configuracion de cabeceras. Pero bueno, en este caso no tengo acceso al backend para hacer la lista blanca asi que seguire viendo que otra solucion agarro.
gracias crack , lo estaba buscando hace mucho
\
Y el las aplicaciones mobile cuentan con este? Y si cuentan como se configura en el back?
Que facil se ve, gracias Leifer.
@@LeiferMendez si super, cors es de express o es de node?
woow muy buena explicación me funcionó :)
excelente!
Tome su like buen hombre!
Gracias!!!
Muchas Gracias!
Gracias por comentar
Si tengo un back en node, que consume otro back que no tenga habilitado el origin de cors, funcionaría igual no?. Es decir, los cors son un mecanismo de seguridad para el navegador, no para el servidor?
Exacto para el navegador si es de server a sever ya puede que tenga o no alguna autorización de API key etc
Muy buena observación amigo. Si se invoca por postman o por soapui no se generan este tipo de problemas.
@@alvarocisneros1648 Gracias! Me tocó vivirlo en carne propia y quería sacarme las dudas. Saludos
¡Gracias por el video y la explicación!!!
el codigo de cors le pusiste al api mas no al que consume la api?
por fin! una solución que no es instalar el plug in de Moesif Origin & CORS Changer xD
De nada! Gracias a ti por formar parte de esta comunidad
LA SOLUCION
Muy interesante tu video y muy explicativo. Este es un problema con el navegador, no con visual studio code, no entiendo por que todos los videos se empeñan en como solucionarlo en visual studio code, ya que si programas utilizando cualquier otro ide o en sublime o en bloc de notas te va a seguir dando el error porque alli no podes instalar este paquete adicional de visual studio code.
- La solucion mas rapida es, luego de arrancar el servidor que puede ser XAMP o el que usen no ejecuten el archivo que van a probar en el navegador haciendole doble clic, en vez de eso en el navegador accedan a "localhost" y luego desde alli accedan a su archivo en la lista que les muestra el navegador
Muchas gracias! super bien explicado :)
Gracias por comentar Erick y bienvenido a esta comunidad!
Eres el mejor, no sabia como arreglar el problema pero ya esta sigue asi :-)
Hola Daniel me alegra que entendieras y gracias por formar parte de esta comunidad
¿que pasa cuando la api es de un tercero y no tenes acceso al backend? Es posible resolverlo desde el front?
No, debes montar un proxy entonces
Veo que la modificación la realizas sobre la api que tienes montada en Express pero que sucede si la api es de un tercero y no puedes modificar esas políticas de CORS, me sucede que intento consultar la api de un tercero desde localhost y me sale ese error.
Buenas sii ese es un caso muy común en ese escenario tienes que crear tu propio endpoint y desde tu backend hacer un fetch o curl a el servicio externo ya que los cors no aplican desde bsckend
Que wen video :))) gracias bro me ayudo mucho!
¿el cors solo funciona con navegadores verdad?, es decir, este error no pasaria con una app movil de android o ios?
Hola Leifer saludos! como puedor resolver el problema de cors cuando intento usar el paquete vue2-pdf-viewer?
MAESTRO!!!! Gracias👍👍
Gracias a ti Alejandro y bienvenido a esta comunidad
pero que pasa cuando github pages es el que configura el servidor despues de desplegar?
Saludos Rodrigo en esos casos entonces debes de montar un servicio de backend que desde ese backend si de conecte al servicio que está dando problema de los cors eso es un problema muy frecuentemente.
Una duda si yo no tengo acceso a la API para modificar que origenes permitir y cuales no, digamos que es una API que no es mia, como le harias en ese caso?.
Hola Jose si no tienes acceso entonces deberia hacer un servicio que a nivel de backend osea te montas una api en node que sirva como capa intermedia entre el SERVICIO TERCERO ---> FRONTEND
Gracias ....muchas gracias
Gracias a ti
Soy nuevo en angular en fin nuevo en todo lo que tiene que ver con desarrollo web y me e tomado con eso de los cors en muchas publicaciones y me hacia la cabeza un 8 porque no entendía nada de nada, pero todo cambio cuando #Leifer ataco
Gracias
Hola, cómo lo soluciono en sublime text?
Tengo este problema actualmente pero desde un app. Cual seria el origen de la app para cuando esta haga la petición el api le responda
Hola amigo, buen video! increible. Te queria consultar yo tengo el problema 504 gate away tendras alguna solucion?
gracias rey
Muchas por compartir conocimiento.
amigo he creado un documento PDF en react pero cuando importo una imagen me sale el error cors y no se puede ver la imagen sabes como se puede solucionar ??
Pregunta, tengo una aplicación en ionic 6 y me corre perfectamente en mi navegador web, pero cuando la corro en un emulador o en un dispositivo físico me arroja las políticas de cors hay alguna configuración aparte para las aplicaciones android ?
Hola Leifer, cómo estás? En mi caso me conecto con una API de un dispositivo Firewall de red, el cuál no he visto como modificar para cambiar dicho parámetro, yo necesito modificar algo en mi código para que cuando le pego en su api no me de error de cors, es posible? Por ejemplo si ejecuto mi browser sin cors chequeo funciona perfectamente. Uso html con js.
que felicidad cuando tienes un problema que no entiendas una poronga y con buscarlo en youtube te sale altoque xd
Y en javascript VANILLA?
Excelente video, como podemos hacer para que por ejemplo, solicite en los headers un "api-key" y que si esta no es correcta tampoco nos dejé conectarnos
Gran video amigo muchas gracias
Gracias a ti Vladimir por comentar y unirte a está comunidsf
No sirve, no tengo visual studio, tengo sublime test, no se donde esta esta esa consola que abriste para poner lo de npm i cors
Es posible desactivarle el cors al chrome?
Gracias bro! me sirvió mucho este video!
gran video! me quedo una duda, desde el lado del front, cuando realizo una peticion a una api me sale el error de cors, si la hago con fetch y cambio el mode la puedo lograr correctamente, en cambio cuando la hago con axios no tengo manera, tienes idea si se puede hacer con axios de alguna manera? saludos!
Como la logras con fetch?
y si el back end esta realizado en JAVA EE como se solventaaa esoooo ???
Hola Daniel, tendrías que buscar una librería que pueda manejar estos permisos de orígenes cruzados en JAVA EE Un saludo! ✌
hermano recien veo tu video y me re diste una mano! gracias y saludos!!
Saludos Rodrigo gracias por tu comentario
Tremendo crack
Gracias Amir por formar parte de esta comunidad
todo bien pero cuando utilizo peticiones content-type: multipart/form-data no los deja pasar :c
Haciendo pruebas con un API que no es mio, realizando un fetch en js recibo el error de CORS, pero si lo hago desde Postman si recibo la respuesta. Algunos recomiendan agregar un header de "Access-Control-Allow-Origin": "*", pero eso no cambia.
Hola Federico, tenemos en el discord una sesión especial para interactuar sobre estos temas, se llama asesoría técnica, allí encontrarás a varios compañeros que brindan soporte o puede que también me encuentres a mi.
Se creó con la finalidad de poder compartir más rápido y encontrar soluciones.
Te dejo el link
discord.gg/THUWQEwc
@@LeiferMendez Buenas, entro al Link de Discord y me dice que ya expiro, tendran otro Link actual? Gracias
Yo tengo un problema, pero con instagram. No me carga la página en ningún navegador, y al momento de poner en inspeccionar, me aparece que hay un error de CORS. Yo no sé nada sobre esto, así que, por desgracia, terminé con el cerebro un poco revuelto. 😅Pero ¿habrá alguna forma de solucionarlo?
Muy buena explicación!
Gracias Raúl y bienvenido
buen video amigo gracias
Gracias a ti Crhis por formar parte de esta comunidad
Excelente, sigue asi
Alan gracias por ver y formar parte de esta comunidad
Estimado como puedo arreglar el cors en angular con bd de firebase porque cree el archivo JSON y sigue el problema
Hola Claudio mm tendría que ver el código para esta más en contexto
Muy buen video.
¿Me podría indicar si el avatar del FrontEnd lo hiciste en alguna WEB?
y como seria si se esta utilizando laravel?
Daniel en Laravel existe un paquete también para la configuración de cors
Consulta, esto solo pasa con html? Si por ejemplo yo creo una api que solo devuelve 1 recurso json cuando le hacen peticiones tambien tendria este problema con el cors si intento acceder desde el navegador? gracias!
Este error es frecuente cuando el navegador llama a una API. Si tienes un backend que Internamente llama a otra API no presentas este error
@@LeiferMendez gracias, ahi entendi mejor
Amigo me puedes ayudar por favor, no soy programador y no tengo mucha experiencia con el tema, pero tengo un problema con las CORS, se me presentó de un momento a otro y es algo urgente...
Muchas gracias de antemano
Hola Daniel, te invito a que puedas pasarte a mi comunidad de discord, allí podrás exponer tu error y tendrás compañeros dispuestos apoyarte.
link.codigoencasa.com/discord
Un saludo! ✌
Gracias por formar parte de la comunidad
gracias, entonces el problema en mi caso seria la api a la cual me conecto, aparte de eso no puedo hacer nada mas que instalar extension a chrome para que me deje conectarme? ya que no puedo modificar el servidor de la api... la idea mia era subir la web a mi portafolio para que otros la prueben pero el cors me esta dificultando mostrar el trabajo :/
Quite todo como en el video y me sigue saliendo lo mismo.. Ni idea si es tema de caches u otras cosas pero sigue saliendo el mismo error.. Lo estoy usando con sockets
Hola si es con socket guiate de cómo realize aquí th-cam.com/video/27BNEN5TxJ8/w-d-xo.html