CORS - ¿Que es Cors y como solucionarlo?

Un error muy común que muchos desarrolladores obtienen cuando están trabajando desarrollando aplicaciones web FullStack (Frontend y Backend) es el típico error de Cross Origin Resource Sharing o CORS, así que en este video te explicare porque puede que hayas obtenido este error, y te daré un ejemplo practico para que lo veas en la practica también.
Índice del Contenido
00:00 ¿Qué es CORS?
07:29 Ejemplo Práctico de CORS
⭐ Cursos Recomendados
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
⮕ Twitter / fazttech
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef261d77de5
Namecheap ⮕ namecheap.pxf.io/ErDe9
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
🌎 Sitio Web
fazt.dev/react
#cors #desarrolloweb #frontend #backend

[@ronaldojara9112]

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.

[@job-gg]

El video que nadie pidió pero TODOS necesitabamos ❤

[@user-qp6sq9pw8b]

‏‪0:10‬‏ ]}>

[@user-qp6sq9pw8b]

❤😂🎉😢😮😅😊

[@santosvluis]

Tanto lio para entender el molestoso CORS, con un simple video queda mas que CLARO, gracias Fazt

[@angeldavidvargaslaiton1849]

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 👌

[@jimmypedraza433]

El algoritmo 😂😂😂😂

[@juanca4543]

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.

[@jorgevalbuena4502]

Es increíble, fazt habla y es tutorial puro..... gracias!

[@rodrigomartinez1202]

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. ❤

[@LeonardoJCaballeroG]

La mejor explicacion que he visto sobre CORS, gracias por compartirla!!!

[@robertostorino9023]

Muy clara tu forma de explicar. Ahora por fin pude comprender CORS. Muchas gracias Fazt.

[@genecles]

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!!!

[@javiergarciafillol4454]

En su dia me pelee muchísimo con esto, cuando recién salio me volví loco, que suerte para los nuevos, muy bien explicado

Es el video que más he estado esperando... Muchísimas gracias!!!

[@luisparra7386]

Qué crack, de este tema tenía conocimientos básicos y desconocía muchas cosas más, pero aprendí todo lo que desconocía 😁😁

[@superconocimiento]

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.

[@SonGoku-pc7jl]

Gracias Fazt, imposible explicarlo mejor para entenderlo mejor que nunca como que hay un "prefech options" jeje :)

[@pythonbrothersandfamily]

Te admiro mucho bro, gracias por el buen contenido

[@Lukas-dt9km]

Excelente como siempre Muchas gracias por la explicacion Fazt!!

[@tomich20]

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 ;)

[@santiagogonzalezmontoya5370]

Excelente explicación, muy importante. Gracias maestro!

[@lucasquiroga5032]

justamente tuve el problema ayer jajajaja parece a proposito, gracias fatz!

[@coneledeleon]

Que explicación más clara, se agradece bro

[@kevinjacksonreyesrojas7064]

Gracias 🎉, soy android dev pero también me gusta el desarrollo web ❤

[@joaquinbustelo7889]

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

[@tmt_katakuri9573]

Increíbles videos, un saludo ❤️💪🏻

[@girosinside]

Muchas gracias Fazt. Tengo una duda como se soluciona en el caso de Next.JS. Estoy trabajando con la versiones 13.4

[@gabrielrincon6744]

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

[@gerardopacheco9521]

excelente explicación, muchas gracias!!!!!

[@javerleo]

Excelente explicación. Gracias.

[@abelmoreno5730]

Ame esos ejemplos en varios lenguajes 👍

[@wdelcanto]

Excelente video!, había visto eso pero no tan bien explicado.

[@rodrigoalonso8678]

Buen video, muy bien explicado!

[@phonevelarde]

Exelente video .. gracias brohh

[@josecasanova3502]

Gracias por los videos!

[@LuisSCuevas]

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 ♥

[@cerm88]

Excelente vídieo como siempre

[@edgardsierra9261]

Súper útil e informativo!! Fazt, para cuando el curso en Nginx? Hace años lo estás prometiendo. Saludos!!

[@FaztCode]

Dale lo publico muy pronto :)

[@jesussalcido2578]

Como haces los videos y animaciones de las flechas e íconos? Muchas gracias por la explicación, un crack c:

[@enmanuelcruzdejesus765]

Excelente explicacion

[@juanchoprogramacion]

Oro puro , muchas gracias

[@LOGFILEGDmegusta]

Que procede cuando solo hice un proyecto react de front end usando una API que no es mía? No puedo moverle al servidor

[@Diez_1010-u3i]

Hola ,una consulta ,quiero inpeccionar una web,pero apenas apretó (f12) me redicciona , eso como puedo solucionarlo?🙏🏼

[@avsystemsacademy133]

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.

[@dariopizzi8881]

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)

[@gabrielrincon6744]

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.

[@josealfredo787]

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

[@FaztCode]

Gracias Jose, te dejo el video de Headless CMS: kzbin.info/www/bejne/aJ2vlZeqeMyNb5o

[@fernandoch9455]

Y si la request es a un endpoint al que no tengo acceso al código? Es decir, no tengo acceso al backend

[@lucasbianchi8720]

gracias man sos un capo

[@javiergarciafillol4454]

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

[@cesarmejias9008]

Buenas, puedes pasar la documentacion sobre eso por favor

[@goktugerol1127]

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?

[@michae301]

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

[@FaztCode]

Me he tardado un poco jaja

[@KjshServer]

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í.

[@angelmontanovargas497]

Graciasssss !!!!!

[@CAZChronosoul]

TE AMO MEN

[@beni3833]

Si tengo un problema de CORS pero con una API externa, como puedo solucionarlo?

[@emmanuelareiza9699]

Fas te amo

[@eliuddyn]

Amazing 🔥🔥

[@user-xi4vt6pg2f]

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

[@anthonygoyo8754]

Cual es la ruta de aprendizaje para saber todo lo que usted domina?

[@FabianD1991]

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

[@leroycarrasquero9065]

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.

[@type.fernando]

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?

[@type.fernando]

La encontre en nerd fonts: Mononoki Nerd Font :)

[@cristianvega501]

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?

[@FaztCode]

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

[@hazlosipuedes]

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"....

[@isralara1166]

Y si no temgo acceso al servidor v:?

[@bl3ssedc0de]

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.

[@pipe201196]

Que consola usas en powershell

[@FaztCode]

es ohmyposh: kzbin.info/www/bejne/mmrcYZ9trr5nZpY

[@orlandomanuelospinohernand9869]

Hola Fazt saludos. Me gustaría saber que distro de Linux utiliza ❤

[@FaztCode]

De momento Xubuntu es la distro que uso :)

[@ijeanpierrebp]

Que pasa si es una api intentando comunicarse con otra api de diferente dominio?

[@FaztCode]

Cuando se trata de multiples Backend comunicandose no hay problema, porque el tema de CORS es un asunto del navegador

[@Holri]

Master 😈

[@gsdealer7691]

que hacer si no tienes acceso al servidor

[@FaztCode]

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

[@enzozalazar4759]

terrrrrible gracias!

[@agustinroman1074]

Punto con

[@franciscomauricioruiz725]

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

[@juanalfredocolmenero6347]

C😈RS significa Hola Demonio!

[@codigoen30seg]

Primero🥷🏼✨🔥

[@compiller6637]

maldito cors jajajaja🤣