Por fin encuentro un video que explica este tema. Aunque ya habia resuelto esto cuando me dio dolores de cabeza solo lo habia solucionado pero sin entender lo que estaba haciendo... gracias por el video y la explicación. Genial!!!
Jajajaj, de casualidad no lees los pensamientos de tus suscriptores, por que justamente anoche esta solucionando un problema de cors, jajaja el mundo es un pañuelo... Muchas gracias por el video 👌
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.
El video que me hubiera encantado encontrar cuando me tope con este tema las primeras veces. Muy claro. Gracias. Te felicito por el contenido que generas.
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. ❤
Totalmente cierto , se encarga de poder hacer peticiones URL http de UN dominio a otro , yo trabajo con Los cors en php para poder consumir las peticiones de base de datos mediante reactJs de lo contrario sino le pongo Los cors no puedo hacer peticiones de una url a Otra
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
Por cierto con Vite puedes hacer de proxy para evitar configurar cors asi la petición la hace contra vite y luego la redirige al backend asi se salta el error
Si van a usar el flag de credentials, no pueden usar * ni un Array de control-allow-origins. En ese caso, simplemente desde el backend lean el header de origin, lo guardan en una variable, y ese es el que permiten. Para mas seguridad, si se crean un array de dominios autorizados, y solo hacen el set header si el origin solicitado esta en esa lista. De nada ;)
CORS: *Access-Control-Allow-Methods: Este encabezado indica los métodos HTTP que están permitidos para acceder al recurso en cuestión. *Access-Control-Allow-Headers: Este encabezado especifica los encabezados HTTP personalizados que están permitidos en las solicitudes CORS. *Access-Control-Allow-Credentials: Este encabezado indica si se deben permitir las credenciales, como las cookies, en las solicitudes CORS. *Access-Control-Expose-Headers: Este encabezado permite que los encabezados HTTP personalizados sean accesibles en la respuesta a la solicitud CORS. *Access-Control-Max-Age: Este encabezado especifica el tiempo máximo en segundos durante el cual el navegador puede realizar solicitudes CORS sin enviar una nueva solicitud de pre-vuelo. Estos encabezados se utilizan en conjunto con Access-Control-Allow-Origin para definir y restringir el acceso a recursos de diferentes dominios, lo que ayuda a proteger la seguridad de los datos del usuario y prevenir ataques de XSS.
Siempre uso CORS... Porque en generalmente uso Node, Java, Python, Ruby para backend. Pero en ultimo proyecto que estoy trabajando tengo backend con Laravel version 8... El lider tecnico menciono especificamente que no deberia de poner CORS en Laravel. Apoco lenguaje / framework que se usa afecta en eso?
Que gran video fazt, como siempre. Una consulta: ¿Que font o tipografia estas usando cuando muestras como solucinar el problema de cors con distintos lenguajes?
Lo unico que no entiendo es cuando haces una petición de un backend a otro backend el cors no frena la petición, solo protege del frontend al backend, es confuso para mí.
Este es un problema muy recurrente, te falto decir que todo esto es cuando tienes tu front y back en el mismo servidor... Yo tuve ese problema en angular y sólo lo pude solucionar al poner mi back en otro servidor... Claro quizá ese servidor si tenía la configuración correcta... El front es muy apasionante, todos queremos hacer front, pero cuando subes todo a tu vps inicia el "verdadero terror"....
Este es un problema que aparece cada vez que creas una apliacacion cliente-api... Lo he padecido tanto con Vue -> php como con ReactNative -> php, este ultimo enviando con Axios y recibir Authotization, claves y dejar todo las prolijo. Pero ya uno se curte y putea menos. jaja
Hola Fazt, excelente video, tengo una inquietud debido a mi experiencia haciendo web scraping, existen servidores que obviamente por medidas de seguridad tienen una lista de dominios o subdominios CORS permitidos en su backend, tradicionalmente la dinámica web scraping implica que no se tiene acceso al código del backend, ¿qué se podría hacer en este caso? ¿sí quiero, por ejemplo, consumir una API de un tercero? una solución muy "divertida" (y estoy siendo amable con las políticas de seguridad de algunas API desplegadas en el entorno donde trabajo) es mediante Postman/Newman o software similar. ¿existe una forma de hacerlo propiamente en el fronted? por ejemplo, una librería en JS que emule una petición de desarrollo como lo hace Postman. Por cierto, la anterior es una de estas formas.
No viene al caso, pero a alguien puede ayudar, para los que usan sockets con sockeio: los de socketio deben setear su propia configuración a nivel de sockets, independiente a la configuración del servidor.
Fazt y cuando el código se manda a producción, vamos a tener que cambiar el dominio local a nuestro dominio dónde se ubica el frontend ( supongo ) verdad?
Si tienes que colocar el dominio de producción de tu frontend cuando lo despliegues, es por esto que puedes crear configuraciones para desarrollo y producción
faz como estas ?? se que es ya como que muy tarde aclarar duda con este tema. Es que tengo un API con PHP y le puse todos esos encabezados y me funciona a la perfeccion localmente al consumirla y hacer peticiones con reactjs, pero cuando despliego la API de PHP al servidor apache de debian12 no me funciona la API incluso cuando le hago las peticiones no funciona y me arroja error 404. Por favor ayuda , alguien.
Puedes hacer peticiones directas al servidor desde programas como Postman o Clientes REST similares, o tambien puedes usar proxies cors, desde otros servicios para que puedas hacer la peticion, aunque esto significa que tus peticiones pasan por un tercero
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
Nunca me quedo tan claro la explicación de CORS , siempre ponía "*" para evitarme dolores de cabeza , gracias Fazt , estuvo increíble el video.
El video que nadie pidió pero TODOS necesitabamos ❤
0:10 ]}>
❤😂🎉😢😮😅😊
Tanto lio para entender el molestoso CORS, con un simple video queda mas que CLARO, gracias Fazt
Muy clara tu forma de explicar. Ahora por fin pude comprender CORS. Muchas gracias Fazt.
En su dia me pelee muchísimo con esto, cuando recién salio me volví loco, que suerte para los nuevos, muy bien explicado
Por fin encuentro un video que explica este tema. Aunque ya habia resuelto esto cuando me dio dolores de cabeza solo lo habia solucionado pero sin entender lo que estaba haciendo... gracias por el video y la explicación. Genial!!!
Jajajaj, de casualidad no lees los pensamientos de tus suscriptores, por que justamente anoche esta solucionando un problema de cors, jajaja el mundo es un pañuelo... Muchas gracias por el video 👌
El algoritmo 😂😂😂😂
La mejor explicacion que he visto sobre CORS, gracias por compartirla!!!
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.
El video que me hubiera encantado encontrar cuando me tope con este tema las primeras veces. Muy claro. Gracias.
Te felicito por el contenido que generas.
Es increíble, fazt habla y es tutorial puro..... gracias!
Te admiro mucho bro, gracias por el buen contenido
Gracias Fazt, imposible explicarlo mejor para entenderlo mejor que nunca como que hay un "prefech options" jeje :)
Es el video que más he estado esperando... Muchísimas gracias!!!
Gracias 🎉, soy android dev pero también me gusta el desarrollo web ❤
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. ❤
Totalmente cierto , se encarga de poder hacer peticiones URL http de UN dominio a otro , yo trabajo con Los cors en php para poder consumir las peticiones de base de datos mediante reactJs de lo contrario sino le pongo Los cors no puedo hacer peticiones de una url a Otra
Súper útil e informativo!! Fazt, para cuando el curso en Nginx? Hace años lo estás prometiendo. Saludos!!
Dale lo publico muy pronto :)
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 explicación más clara, se agradece bro
Por cierto con Vite puedes hacer de proxy para evitar configurar cors asi la petición la hace contra vite y luego la redirige al backend asi se salta el error
Buenas, puedes pasar la documentacion sobre eso por favor
justamente tuve el problema ayer jajajaja parece a proposito, gracias fatz!
Excelente explicación. Gracias.
Excelente como siempre Muchas gracias por la explicacion Fazt!!
Excelente explicación, muy importante. Gracias maestro!
Ame esos ejemplos en varios lenguajes 👍
FAZT como es posible que algo tan sencillo como el cors recién lo expliques 7 años despues, esto me hubiera servido mucho hace 1 año T.T
Me he tardado un poco jaja
Si van a usar el flag de credentials, no pueden usar * ni un Array de control-allow-origins. En ese caso, simplemente desde el backend lean el header de origin, lo guardan en una variable, y ese es el que permiten. Para mas seguridad, si se crean un array de dominios autorizados, y solo hacen el set header si el origin solicitado esta en esa lista. De nada ;)
excelente explicación, muchas gracias!!!!!
Exelente video .. gracias brohh
Por que no llegaste mas tempranooo me toco aprender esto por mi cuenta y a la mala ahhaha pero gracias por ayudarnos con tus tutos ♥
Excelente vídieo como siempre
Increíbles videos, un saludo ❤️💪🏻
Gracias por los videos!
Excelente explicacion
Entendiendo que son CORS en Agosto 2024 ;) buena explicación.
Excelente video!, había visto eso pero no tan bien explicado.
Oro puro , muchas gracias
CORS:
*Access-Control-Allow-Methods: Este encabezado indica los métodos HTTP que están permitidos para acceder al recurso en cuestión.
*Access-Control-Allow-Headers: Este encabezado especifica los encabezados HTTP personalizados que están permitidos en las solicitudes CORS.
*Access-Control-Allow-Credentials: Este encabezado indica si se deben permitir las credenciales, como las cookies, en las solicitudes CORS.
*Access-Control-Expose-Headers: Este encabezado permite que los encabezados HTTP personalizados sean accesibles en la respuesta a la solicitud CORS.
*Access-Control-Max-Age: Este encabezado especifica el tiempo máximo en segundos durante el cual el navegador puede realizar solicitudes CORS sin enviar una nueva solicitud de pre-vuelo.
Estos encabezados se utilizan en conjunto con Access-Control-Allow-Origin para definir y restringir el acceso a recursos de diferentes dominios, lo que ayuda a proteger la seguridad de los datos del usuario y prevenir ataques de XSS.
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
Gracias Jose, te dejo el video de Headless CMS: th-cam.com/video/2lLddtCgZ98/w-d-xo.html
Buen video, muy bien explicado!
gracias man sos un capo
Cual es la ruta de aprendizaje para saber todo lo que usted domina?
TE AMO MEN
Siempre uso CORS... Porque en generalmente uso Node, Java, Python, Ruby para backend. Pero en ultimo proyecto que estoy trabajando tengo backend con Laravel version 8... El lider tecnico menciono especificamente que no deberia de poner CORS en Laravel. Apoco lenguaje / framework que se usa afecta en eso?
Que gran video fazt, como siempre. Una consulta: ¿Que font o tipografia estas usando cuando muestras como solucinar el problema de cors con distintos lenguajes?
La encontre en nerd fonts: Mononoki Nerd Font :)
Muchas gracias Fazt. Tengo una duda como se soluciona en el caso de Next.JS. Estoy trabajando con la versiones 13.4
Si no lo podemos solucionar desde el front es valido crear un server proxy para evitar los cors? (Asumiendo que no tenemos acceso al back)
Amazing 🔥🔥
Lo unico que no entiendo es cuando haces una petición de un backend a otro backend el cors no frena la petición, solo protege del frontend al backend, es confuso para mí.
Este es un problema muy recurrente, te falto decir que todo esto es cuando tienes tu front y back en el mismo servidor... Yo tuve ese problema en angular y sólo lo pude solucionar al poner mi back en otro servidor... Claro quizá ese servidor si tenía la configuración correcta... El front es muy apasionante, todos queremos hacer front, pero cuando subes todo a tu vps inicia el "verdadero terror"....
Como haces los videos y animaciones de las flechas e íconos?
Muchas gracias por la explicación, un crack c:
Este es un problema que aparece cada vez que creas una apliacacion cliente-api... Lo he padecido tanto con Vue -> php como con ReactNative -> php, este ultimo enviando con Axios y recibir Authotization, claves y dejar todo las prolijo. Pero ya uno se curte y putea menos. jaja
Graciasssss !!!!!
Que procede cuando solo hice un proyecto react de front end usando una API que no es mía? No puedo moverle al servidor
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?🙏🏼
Si tengo un problema de CORS pero con una API externa, como puedo solucionarlo?
Hola Fazt, excelente video, tengo una inquietud debido a mi experiencia haciendo web scraping, existen servidores que obviamente por medidas de seguridad tienen una lista de dominios o subdominios CORS permitidos en su backend, tradicionalmente la dinámica web scraping implica que no se tiene acceso al código del backend, ¿qué se podría hacer en este caso? ¿sí quiero, por ejemplo, consumir una API de un tercero? una solución muy "divertida" (y estoy siendo amable con las políticas de seguridad de algunas API desplegadas en el entorno donde trabajo) es mediante Postman/Newman o software similar. ¿existe una forma de hacerlo propiamente en el fronted? por ejemplo, una librería en JS que emule una petición de desarrollo como lo hace Postman. Por cierto, la anterior es una de estas formas.
Fas te amo
No viene al caso, pero a alguien puede ayudar, para los que usan sockets con sockeio: los de socketio deben setear su propia configuración a nivel de sockets, independiente a la configuración del servidor.
Hola Fazt saludos. Me gustaría saber que distro de Linux utiliza ❤
De momento Xubuntu es la distro que uso :)
Y si no temgo acceso al servidor v:?
Fazt y cuando el código se manda a producción, vamos a tener que cambiar el dominio local a nuestro dominio dónde se ubica el frontend ( supongo ) verdad?
Si tienes que colocar el dominio de producción de tu frontend cuando lo despliegues, es por esto que puedes crear configuraciones para desarrollo y producción
Master 😈
quiero colocar un 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
Que pasa si es una api intentando comunicarse con otra api de diferente dominio?
Cuando se trata de multiples Backend comunicandose no hay problema, porque el tema de CORS es un asunto del navegador
faz como estas ?? se que es ya como que muy tarde aclarar duda con este tema. Es que tengo un API con PHP y le puse todos esos encabezados y me funciona a la perfeccion localmente al consumirla y hacer peticiones con reactjs, pero cuando despliego la API de PHP al servidor apache de debian12 no me funciona la API incluso cuando le hago las peticiones no funciona y me arroja error 404. Por favor ayuda , alguien.
como lo solucionaste ? yoi ando igual pero con java en spring boot
Que consola usas en powershell
es ohmyposh: th-cam.com/video/d9y0l7yY404/w-d-xo.html
que hacer si no tienes acceso al servidor
Puedes hacer peticiones directas al servidor desde programas como Postman o Clientes REST similares, o tambien puedes usar proxies cors, desde otros servicios para que puedas hacer la peticion, aunque esto significa que tus peticiones pasan por un tercero
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
terrrrrible gracias!
C😈RS significa Hola Demonio!
Punto con
Primero🥷🏼✨🔥
maldito cors jajajaja🤣