Learn CORS In 6 Minutes

[@aplefull]

Well.. It's easy when you actually have an access to the server. The real problem for me is when you are working with API's and run into cors. That's when i start thinking about jumping off of a bridge

[@ZM-dm3jg]

This. When CORS comes up from an external API and it's not supposed to, blood pressure spikes instantly lul

[@andrewv8548]

just gotta make a proxy

[@stanleychukwu7424]

😂😂🤣🤣🤣

[@hermit41]

Lol

[@slatanek]

Setting up a proxy is easy enough. There's plenty of Internet advice on CORS issues which is completely useless and confused. Setting up a proxy literally takes 15 min and solves the problem once and for all. You can reuse the proxy in your future projects.

[@jcpluto4555]

Dude ive been binging your videos for weeks. Just got my CS bachelors and you've taught me more than all my professors combined. Thank You for firing up my love for frontend.

[@maksimkuzmin5246]

What is your university?

[@saifsaeed1158]

I completed CS bachelors and postgraduate degree and I can confirm it’s a waste of money and time , I actually learned from KZbin more than I learned from my professors

[@Neoma159]

@@saifsaeed1158 Because professors aren't supposed to teach you like people on YT does. University gives you a path and you have learn by yourself.

[@FerelUltra]

@@Neoma159 what does 'binging' stand for?

[@Neoma159]

@@FerelUltra watching video after video non stop

[@TomDoesTech]

CORs is one of those problems that every single developer faces. Thanks for the explanation!

[@Name-lt2tz]

long time I had not faced those shitty problems. But when started develop with vue and laravel , this shit started again.

[@gtv3582]

You made my morning by starting off with one of my favorite spongebob clips lol.

[@SeanClarkeMusic]

I've been developing for what feels like forever, and these small things (like CORS) still crop up and interrupt flow. As you point out, the solutions in reality are always simple in the end :) It's so helpful to have a quick few minute burst of solution orientated goodness. Another issue put to bed for good. Thanks man!

[@dehnhunsworth1600]

After a year of working on native apps I come back to a web project and run into this issue immediately, then your video comes out a couple days later, Perfect!!

[@AnonymousHandle628]

Yours 30 seconds cookie part really helped me a lot. Had spend my whole morning working on cors, even read all answers on Stackoverflow and cors documentation but was still getting problem related to cookies. Your video is really a life saver and also at the best time. Really love you a lot❤️❤️

[@nouraizasad4401]

thats why i love and actually prefer watching quick tutorials instead of going through the docs, especially when i have to get the initial, basic understanding of how something works. after i have the basics right, then i view the docs to build on top of what i know.

[@d.sherman8563]

It’s actually the browser which is blocking the request, not the server. CORS is a safety measure for the client, all the cors library on the server is doing is setting the response header. You can test this by replaying the same request through something like postman. I know this might seem like a semantic difference but it’s important to realise that adding the cors package to your server gives you absolutely no control over where requests to your server originate from. It only tells browsers to block requests to your server originating from another domain.

[@Joselson14]

This is exactly the headache I've had for the past 3 months. I am using React (Vita) for the frontend, node in the backend and Azure AD. The browser blocks every request I perform to my AD. The temporary solution I found was to use vite as a proxy to my API's. This works well for development but before releasing for production I need to fix it and I do not even know how yet.

[@d.sherman8563]

@@Joselson14 Using a proxy server is actually one of the best and most common solutions, you just don’t want to use vite dev server for it. In AWS you could use something like cloud front, or id self hosting a lightweight http server like nginx that is in front of everything else and then, for example, proxies all requests to /api to your api server, while all other routes are forwarded to your frontend ssr server. The alternative would be adding cors header to the AD endpoint is that’s possible, but I think a proxy is far more flexible. The reason the proxy server method works is because cors only affects requests from browser, end well, the proxy server isn’t a browser. You can even add restrictive cors header to your proxy server so only you frontend can call it from the browser.

[@amirjosevelasquezaburdene4318]

Solved a 2 days long headache in a simple well explained video of 6:03 minutes, bro, you are awesome! 🔥🔥

[@programmingonly476]

The best thing of this channel is that you're explaining well in a simple and easy English language, keep going;

[@Kglviews]

Last year, this particular error set us(our team) back about 3-5months give or take and it really means the world to the dev community how you were able to provide a solution in a very well-explained manner. Thank you very much👏

[@Kglviews]

@@gregor3099 Couldn’t agree more

[@scottlieber7985]

Have been banging my head against the table for 3 hours. Then I find your video and you fix it in 6 minutes. AHHHH, SO RELIEVED. Such gratitude! Thank you!

[@Llkc60]

working on my first project getting my head around http requests, cookies, jwt, routes all at once and on top of it I get this cors issue. I watched a few 'solutions' talking about cumbersome apis, chrome bugs, proxies. then you explain the error, show what's going on in 6 minutes: problem solved. This is how you make tutorials. to the point, no bullshit, straightforward! subscribed and thank you!

[@Golgafrincham]

Something I have tried to understand for a while but never got it, and you manage to describe and demo it in about 6 minutes... Awesome!

[@deepakfialok]

That's what exactly a doctor ordered for a busy person like us... simple explanation in 6 mins.. Good work...

[@thewonderinggecko818]

dude after spending hours trying to figure this out you are the only one who was able to fix the issue, Thank you!

[@SecretEyeSpot]

omgsh.. that spongebob snippet! perfect description of my emotions with CORS. Thank you for providing the basics to understand it!

[@Nleil]

Finally, I found this video, I am stuck here for days and found out a lot of useless solutions... Thank you from my heart.

[@ahmed19567]

I was searching up this problem this whole week and took a break when I couldn’t find it. Then this videos pops up

[@sapindersingh1165]

Kyle’s getting funnier day by day 😍

[@mohamedsulaimaansheriff9787]

Inspired from fireship

[@imPriyankCoder]

I agree he taking fireship tutorial as inspiration too bad there is less tutorial more meme and short video anyway he has to do what he has to do

[@mohamedsulaimaansheriff9787]

@@imPriyankCoder But content is best for experienced one

[@adisonmasih]

India

[@DennisIrungu-dx8md]

Working perfectly even on deployment after following your solutions... I recommend this video to anyone stuck with a CORS Policy error

[@juergenstenzel7300]

very good video. You speak fast but very clear. Even as a non native english speaker from germany, it's easy to follow you. Very good.

[@Himanshu-qr1ww]

If you've just posted this video starting of this week....it would have saved me a lot of time..... I've been struggling with CORS this whole week..... I had to read all the documentation and experiment with everything to get to understand all these....😑😑

[@SkylineTwitch]

Im french and the video is more comprehensive than some french vidéos. Thank you

[@calarcher4869]

You absolutely rock. I swear half my knowledge is from your channel. Thank you so much for all you do

[@danielcolmenares2168]

Best intro ever! Great video, thanks!

[@mjcillo1297]

OF CORS! Thank you for this man.. you really simplify everything!

[@PedroSilva-te5vl]

Thank you, this should be something that should be part of all web dev courses

[@jacarijon]

I have been the whole day and you helped me fix it half of your video.

[@nicolaserriquenz9905]

just fixed my issue thanks to this video, i have been subscribed for a while, yt just recommended and it was so helpful, ty

[@yusrax3]

omg im so happy been stuck since one week i felt so good after seeing response 200 can't tell tysm ✨❤️

[@aidin3186]

you are officially my hero now, you saved me from a stroke right there, love you dude🤩

[@HassanKhan-vc6ij]

if you're having stroke go to doctor then

[@casm101]

I haven't even seen the video yet, but this video is something that everyone needs.

[@patrykkowalski8355]

omg you're the best man, had today an issue with my first node app, as well as i wanted to make whitelist of the domains that cors allow to use, and because of ur video i've made it

[@kduisheev4355]

This is great. your shorter videos are more concise and digestable than longer ones

[@droid2902]

Thanks!

[@WebDevSimplified]

Thank you for the support!

[@pentestical8265]

Few quite important things not mentioned here. First, post requests with JSON do require preflights, so many people will still get CORS errors following this. This is because only certain content types are allowed by default, and JSON is not one of them. Second, withCredentials: true only works when a wildcard is not being used. If you have both set, the browser won't release the response.

[@TopTalentBridge]

I'm still getting error when I'm sending Credentials. Please suggest the solution

[@SathishKumar-op8yy]

@@TopTalentBridge use body-parser to receive JSON objects

[@rohitsengar100]

I've reached almost resources but I was not getting a proper solution. But your video gives me a solution. thanks

[@pritamdas9081]

Thanks man for making a separate video. Few days back I was stuck with the same and had to refer to your Spotify clone video. ❤️

[@Ivoshevo]

wow you are so good. I knew how to use cors but i never knew that small trick about cookies. Thank you a lot Web Dev Simplified. Your free videos on react helped me a lot and i am now on my second job as a full stack React developer :)

[@floridaman964]

Showed my office that intro and they loved it. We've been dealing with CORS issues / third-party APIs for the past week. Picture an office of Patricks smashing PCs.

[@matiascavalcante4698]

Thanks for explaining something that I feel often is presented in a complicated and misleading way, in a much simpler one. You explained well what the issue is and how to solve it. Keep it going that way :)

[@mgara514]

CORS is underlooked by developers. It's essential especially when you build an API-first design software. Hardening CORS alongside the X-Frame-Options it's a good security practice. A must if you want to be PCI certified. (part of a long list of security checkpoints). Take the time to understand the WHY behind CORS or any sort of security feature within the browser, the more you know the better it is.

[@bhaveshgavali531]

Thanks man...generous people like you help me to get closer to my goal ...thanks

[@frankdrolet9439]

Bro you're the best, never stop what you're doing for the developer community!

[@invalidaccount6147]

When I simply searched about this problem on YT. The algorithm just gave useless videos. And here I suddenly found THE perfect video just randomly scrolling your channel's videos. 😐

[@rudy-anconi]

You saved my life! Thank you for the good content my friend. Keep strong!

[@vitaliytikhonov3168]

the best tutorial maker ever, state-of-the-art

[@Ncryptiion]

You're a lifesaver, I was losing my mind for a second.

[@ankitbanerjee6185]

Thx a lot ..... oh God I was stuck 😫 .... This video helped me get out of this problem ..... Thnx u very much ❤️❤️❤️

[@akashsarki]

Dude you make things soo much clear.

[@BugsNRoses_]

Brother Kyle, corse successfully ruined my day, now i know what should i do, i was using django as backend and had to add middleware of corse and allow corse from everything to true, thank you ♥️ Oh And also, because of you i have did a hobby project for a sports club in my place, using reactjs and firebase,

[@7oda_alnakeeb]

This video came at the right time for me كل الحب من مصر all love from Egypt❤

[@TheHuntingSpot]

Thanks! I'm not sure if you remember but I emailed you asking for this video. Well done :).

[@thegreatbambino3358]

It's like google has gone through my network history tab and recommended this video for me!

[@sodiqayilara1519]

Sometimes the error can be very misleading. One time working on a project, we kept getting a cors error, and the app set up was perfect. When I started peeling back the layers, it happened that the dev didn't set up environmental variables on the deployment server. Only advantage was that I read almost everything about cors. Now I have forgotten it all again 😄😄😄

[@fernandoflores8449]

I had those issues like a week ago, so it would have been really nice having thid video then. But still its really good that you did it now, so other ppl dont have to struggle so hard with it

[@srinathsathyanath7435]

Damn man. You're doing the right thing with your videos. As a developer these videos add value than learning some exotic programming language. Great job Kyle 🔥

[@ibrahimmohamedahmedmohamed820]

Bro, you can just run chrome with disabled web security if you’re testing your application locally; much easier and also covers many scenarios

[@deep-12556]

Damn i was stuck on a react project and you made this 😭

[@markonikolic6346]

Just add to your json config file proxy:”url”

[@ShivamJha00]

How about a simple google search

[@manikandanraman]

It was short, crystal and clear as always. Great content

[@ezevalentine7610]

Lol, this guy saved me from a 2years ago video, you just so good

[@Overthought1]

In my case, I'm also seeing something about "Access-Control-Allow-Headers". But this was definitely a helpful start!

[@shubhamnazare3525]

Amazing video as always!

[@salmanulfarisyk7428]

Thanks for taking and presenting a CORS error fix tutorial. Great!!

[@fartasmouad4334]

One of the most useful videos in web development, thank you so much bro

[@johnrobertsonnocos2996]

You are always on point with your tutorials! Great stuff man!

[@lidipm8748]

I am completely nov here, but could understand every step. Thank you for such a great explanation :-)

[@harshthosar8600]

Dude I seriously needed this 😭😭😭😭😭... My system used to send files using axios but recently I have been facing this issue...

[@satyamshah9164]

That intro part, that was actually my condition before watching this video. Thanks for making this video

[@amrutaghate5041]

this helped me understand and fix a cors error - thank you!

[@ElonMusk-wo7zf]

It worked "npm i cors". Thanks man.

[@Olatisun]

When it comes to security, you are the best !!!!

[@djelasrca8091]

O men you saved my day. This is so comprehensive. Thank you

[@honeypot11]

ugh THANK U i could never wrap my head around this error and i ran into it like 50 times

[@ananthraghav9796]

Super simple explanation with demo

[@heyamjoe]

Just 10 seconds in and have hit the Like button. Sorcery. Thanks for the great explaination.

[@_RK_14]

That's a really useful tutorial for NodeJS to get around with this fix. It would be great if the same could be resolved in a React application in the absence of Node proxy server . Thank you.

[@berk473]

Your videos are the greatest!!!! So helpful

[@mrbruce233]

Awesome, I've just started to learn about cors so this made things very clear. Great job

More simple than ever!! Thank you

[@laquantlegrosbg9605]

i thought i'd never go to sleep, thanks mate!!!!

[@Devgranty]

From the depth of my heart, THANK YOU SO MUCH!!!

[@blastingsound22]

It was definitely simpler than I thought, thanks my friend!!

[@shihabshohaul2469]

I love the way you're getting funnier + skilled every single day!❤️

[@mrfoxtrot1824]

Man, you're a hero! Thanks!

[@marcosanchez4137]

Dude we are connected just 2 days ago I had this issue and I couldn't resolved it. THANK YOU.

[@lieutenantlascivious1992]

I've always just set the response headers myself in a middleware call but the cors library makes the code look a little sleeker, thanks for the tip! Using setHeader() app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*') res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE') res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization') next() })

[@manuelcasares7270]

As always great video Kyle, learned SOO much from you... But is it possible to do it without that CORS library?

[@hitthemoney]

yes, he said that you can manually set the headers

[@jackhaugh4198]

What a perfectly timed video - thanks!

[@MemoirsOfMadLad]

THE legend himself major Pog - Thank you, Kyle!

[@matias.montenegro]

this video tutorial with only 6 minutes really proves that you're an amazing teacher, Understood everything on a single view. thanks so much!

[@ScienceDayYT]

OH MY GOD ! I LOVE YOU !

[@JamesQQuick]

Thanks Kyle!

[@MourideGoor]

you just save my life ! Thanks for this great explanations !

[@GianniKoch]

You made my day… week… month… year… probably my whole life so much easier 😂😂 thanks btw! Nice tutorial!

[@andresfelipesalcedosalas8235]

Really nice man, Helped me a lot!

[@benny-wagner]

clear and simple. left an abo!

[@kai.m]

Man, your videos are amazing. Thanks so much!

[@piusvictor8780]

Mr. Simplified, you did a great job👏👏