Cross Origin Resource Sharing (Explained by Example)

Ғылым және технология

If you ever go a website and there some images you liked to reference in your page or blog. You would copy the link, and put in your blog. Only to find out that the image is broken? You copy the link again and paste it in URL and it opens fine?
This is an effect of CORS or Cross Origin Resource Sharing. In this video, we will discuss the main errors that you get as a result of CORS and we will fix them by Example.
Jump codes for your convenient
0:00 intro
03:00 Direct same origin access
04:00 No 'Access-Control-Allow-Origin' header is present
08:10 The ‘Access-Control-Allow-Origin' header has a different value from the origin
10:10 OPTIONS 405 Method not Allowed (Preflight failed)
17:00 Response to preflight request did not pass No 'Access-Control-Allow-Origin' header is present
19:00 Request header field “Content-Type” is not allowed
Stay Awesome!
Hussein

Пікірлер: 383

  • @hnasr
    @hnasr5 жыл бұрын

    Jump codes for your convenient 03:00 Direct same origin access 04:00 CORS Policy Error #1 - No 'Access-Control-Allow-Origin' header is present 08:10 CORS Policy Error #2 - The ‘Access-Control-Allow-Origin' header has a different value from the origin 10:10 CORS Policy Error #3 - OPTIONS 405 Method not Allowed (Preflight failed) 17:00 CORS Policy Error #4 - Response to preflight request did not pass No 'Access-Control-Allow-Origin' header is present 19:00 CORS Policy Error #5 - Request header field “Content-Type” is not allowed

  • @aminomar7890

    @aminomar7890

    3 жыл бұрын

    I had the same problem, searched the web, they talk too much but making it more complicated than it is ! such a people usually don not understand good, because who understand can make it easier to digest not harder! "talk too much but useless!"! you made it easy as it is ! many thanks..

  • @aminomar7890

    @aminomar7890

    3 жыл бұрын

    the Web is full of those showing on but has nothing "wasting their time and others time with their nonsense!", many thanks again for for keeping it easy as it is instead of their nonsense..

  • @pratikgiri878

    @pratikgiri878

    Жыл бұрын

    How can I configure cors to only accept content-type : application/json ?

  • @LetsBuildThatApp
    @LetsBuildThatApp3 жыл бұрын

    We need professors like you in our universities, enthusiastic and full of energy.

  • @glennadams7047

    @glennadams7047

    2 жыл бұрын

    yes !!!!

  • @mubin986

    @mubin986

    2 жыл бұрын

    absolutely!

  • @FadiYoosuf
    @FadiYoosuf Жыл бұрын

    Watching this in 2022. You had only 3215 subscribers 4 years ago. This is really an inspiration

  • @yumengsi
    @yumengsi4 жыл бұрын

    Finally someone can explain these things clearly, thank you!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Yumeng Si really happy i could help!

  • @dawid_dahl
    @dawid_dahl3 жыл бұрын

    This is my new favourite programming channel on KZread. Finally someone who actually knows what they're talking about, and takes time to explain what's going on from first principles.

  • @tomr6818
    @tomr68183 жыл бұрын

    CORS has been confusing me for so long, but after your deep dive, I actually understand what's going on when I get these errors. Thank you so much!!

  • @akashasthana6742
    @akashasthana67423 жыл бұрын

    Hussein you're doing an awesome job explaining concepts that no one else cares explaining. Thank you.

  • @BunnyOfThunder
    @BunnyOfThunder4 жыл бұрын

    I was not merely informed, I was entertained. Walking through the whole process, both response and request, was very useful.

  • @lukechen3794
    @lukechen37944 жыл бұрын

    I am saving this video. Literally couldn't figure out why I couldn't access my site between using localhost and the actual ip. Thanks again!

  • @akrylic_
    @akrylic_4 жыл бұрын

    Love the charisma, I can tell that you genuinely care about making sure we understand, great job!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Akrylic thanks 🙏 that is true I deeply care about my craft and making the best content for you guys. I also strive to get better at it so let me know how can I do better or if there is any new topic you want me to cover. Cheers Hussein

  • @umituzun6837
    @umituzun68373 жыл бұрын

    Really entertaining and basic understandable tutor I have ever see. I have read lots of documents about CORS, but that video was smashed the walls between me and CORS. Thank you very much. God bless you.

  • @borisivkovic1995
    @borisivkovic19953 жыл бұрын

    Probably the best video you can find about CORS Policy. Concise, with great examples and amazing narrative. Well done Hussein!

  • @nikhilraj4098
    @nikhilraj40982 ай бұрын

    Oh man! I just loved the way you explained CORS! Never stop teaching and more importantly keep the same fun and energy! ❤

  • @ajitsingh4346
    @ajitsingh43464 жыл бұрын

    Very accurate, simple, no-nonsense, enjoyable explanation, thanks a lot for the efforts.

  • @Malkit_123
    @Malkit_1235 жыл бұрын

    Very good explanation. Best tutorial i have ever seen. Great work.

  • @hnasr

    @hnasr

    5 жыл бұрын

    Malkit Jatt thank you so much for watching. Glad you enjoyed the tutorial:)

  • @FordExplorer-rm6ew

    @FordExplorer-rm6ew

    4 жыл бұрын

    @@hnasr dude, you have like every concept I ever need to know. You rock

  • @hnasr

    @hnasr

    4 жыл бұрын

    E girl Respecter 😊 enjoy the content!

  • @ozzyfromspace
    @ozzyfromspace2 жыл бұрын

    Could I solve CORS errors? Yes. Did I understand them? No. Then you came along. Thank you, Hussein! You’re awesome man, I hope you never lose your sense of excitement ✨🙏🏽💯🎊

  • @rezamanshouri9773
    @rezamanshouri97734 жыл бұрын

    Duuude, this was the most enjoyable tutorial I've watched in a while, great job!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Awesome! Glad you liked the video and thanks for your comment Reza!

  • @adityasethi9794
    @adityasethi97943 жыл бұрын

    this guy is a genius. the way you explain as a story just shows how well u understand stuff

  • @ttt1986
    @ttt19862 жыл бұрын

    I referred many articles on this.. but nothing could give me the clearest idea like you did right here!! Thanks for the great explanation...

  • @mikeacuin
    @mikeacuin4 жыл бұрын

    WOW! This is exactly the video I was looking for. Thanks Mr. Nasser! More power to you!

  • @basedonprinciple
    @basedonprinciple3 жыл бұрын

    My first time exploring CORS and now I understand it's rules set up by your/a server regarding what requests it allows (from whom, etc.). Thank you!

  • @shahinbayat
    @shahinbayat4 жыл бұрын

    I have always been struggling with my nodejs server fixing "CORS" 😤 issues and NOW I know the errors' meaning and what cors package is actually doing behind the scenes. Thanks mate for presenting these network topics so comprehensive and fun. Your channel definitely deserves much more subs. 🚀

  • @hnasr

    @hnasr

    4 жыл бұрын

    Shahin!! Thank you 😊 I appreciate you.

  • @aminomar7890
    @aminomar78903 жыл бұрын

    I had the same problem, searched the web, they talk too much but making it more complicated than it is ! such a people usually don not understand good, because who understand can make it easier to digest not harder! "talk too much but useless!"! you made it easy as it is ! many thanks...

  • @SouravRoy-mt7fb
    @SouravRoy-mt7fb2 жыл бұрын

    Quality content ... No one can explain better than you. 👍.. creating top notch content for free deserves respect and salute 🙏

  • @uscjake868
    @uscjake868 Жыл бұрын

    Super duper good. Explaining code by doing the same things a newbie would do with lots of missed steps or broken steps. Slowly stepping through each line of code IS the best way to teach this.

  • @shubham_srt
    @shubham_srt2 жыл бұрын

    these type of explainations are what a student wants! showing the wrong thig too! Having knowledge and Teaching both are different skills. Wonder when will Universities understand that

  • @ashrafal

    @ashrafal

    4 ай бұрын

    Often University Teachers(in many countries) are Master Graduates(worse Bachelor doing part time Masters) who have not done much of real world programming. Their academic projects are in JAVA or even C++. They might be good at concept of DS & Algorithms, DB, if they are real good they might have deep understanding of Networking & OS. But, they not much understanding of webservers or web development. CORS might be something they have never come across.

  • @nessun00x81
    @nessun00x814 жыл бұрын

    thanks mate, this video is pure gold!!! I've been struggling for some days trying to fully understand this CORS stuff and now with your examples + my php experiments I'm crushing it :)

  • @hnasr

    @hnasr

    4 жыл бұрын

    nessun00x thanks for your comment!! So happy I could help .. go crush it 💪

  • @therealjayz8036
    @therealjayz80362 жыл бұрын

    I’ve been reading a book about same origin policy and CORS. This video crystallizes those concepts. Thanks for the awesome content

  • @KnightsTemplar1987
    @KnightsTemplar19872 жыл бұрын

    Exactly what I have been looking for. This video should be the first in google search response. Great Job taking the pain to elaborate everything. Kudos!!

  • @simonarnold7094
    @simonarnold70944 жыл бұрын

    I feel like I will watch this video a lot. I tend to forget how CORS works on a regular basis. Fortunately, this video is enjoyable to watch :)

  • @hnasr

    @hnasr

    4 жыл бұрын

    Its funny I made the video and I forget subtle differences in CORS messages as well. Thanks for your comment ❤️

  • @unknownad_official
    @unknownad_official3 жыл бұрын

    unique subject i think you are the only one who explained it

  • @atexnik
    @atexnik3 жыл бұрын

    I'm not a developer, but still was able to absolutely comprehend the tutorial, and that helped me to troubleshoot the application! THANK YOU!

  • @hnasr

    @hnasr

    3 жыл бұрын

    Thanks Alex!! Glad that helped 🙏

  • @3208nandu
    @3208nandu3 жыл бұрын

    Really amazed by your way of teaching and enthusiasm. Thanks for such neat and very understandable examples

  • @luisbalza3774
    @luisbalza37742 жыл бұрын

    Please Mr. Hussein, don't let this video disappear. It's an actual treasure

  • @nandhagopalpalaniswamy4458
    @nandhagopalpalaniswamy44584 жыл бұрын

    Thanks Hussein for the crisp and clear explanation about CORS.

  • @barakdabach4232
    @barakdabach42322 жыл бұрын

    great deep explanation, looked forever for a practical example of CORS, great job!!

  • @tasheemhargrove9650
    @tasheemhargrove96503 жыл бұрын

    Thank you Hussein! I was stuck on this problem for hours. I'm still learning how to build basic applications. I have a simple client application with some HTML, bootstrap, and Javascript using the XMLHttpRequest object to connect to a simple Java Spring API I have as a separate application. I kept running into this CORS problem, and as a read more and solved one issue, another issue would pop up. I knew that there was something I was missing in my understanding of CORS. Now, I have a much better understanding of what's going on with the browser and how it's handling the requests and responses 🙏

  • @snooter28
    @snooter284 жыл бұрын

    Bro, I'd donate you some money for this video 110%. You've earned a subscription out of this alone.

  • @fahadshovon2713
    @fahadshovon27133 жыл бұрын

    I have seen this error and solved this error by using third party libraries for 2 years . Today I finally understood the concept !!! Thanks a bunch for this great video!!

  • @hnasr

    @hnasr

    3 жыл бұрын

    Excellent! thanks Fahad for your comment , glad this helps

  • @SaifUlIslam-di5xv
    @SaifUlIslam-di5xv3 жыл бұрын

    Back when you had so little views. Now, you're one of the most notable backend developers out here on KZread. Time and consistency do wonder!

  • @hnasr

    @hnasr

    3 жыл бұрын

    All love to you thanks!!

  • @nagarajunagari2266
    @nagarajunagari22663 жыл бұрын

    I was ZERO, after watching ur session, I'm feeling like HERO.. Thanks alot sir.. 🙏.

  • @stevenondieki5498
    @stevenondieki54983 жыл бұрын

    Wooow. I don't think I was gonna understand this concept elsewhere. I've subscribed too..can't wait to learn more here

  • @jamesbest2221
    @jamesbest22212 жыл бұрын

    This is the best video on cors that I’ve ever seen! Thank you!

  • @10akashmehta
    @10akashmehta3 жыл бұрын

    Very nice explanation, this is the kind of stuff I need to really understand what is going on behind the scenes. Hussein gives really great examples in his videos. I just found out this channel and started watching videos. I have a lot to learn now!

  • @VeaceslavBARBARII
    @VeaceslavBARBARII3 жыл бұрын

    Finally I've got the concept behind the CORS. Thanks friend!

  • @hnasr

    @hnasr

    3 жыл бұрын

    Your welcome! Glad it helps

  • @eurekagao2078
    @eurekagao20785 жыл бұрын

    Best cors explanation even seen. Good Job, Hussein! Subscribed your channel without the least hesitation.

  • @hnasr

    @hnasr

    5 жыл бұрын

    Eureka Gao thank you so much for your comment! Hope you enjoy the rest of the content in this channel! 🙏 cheers

  • @daberee9666
    @daberee96663 жыл бұрын

    Hey Hussein, I very very rarely make comments, so you should know this video was very helpful in my understanding of web server and client relationship especially in code because you had the simplest server and built on it. Your explanation is very GRANULAR and I love your accent haha. Keep the content coming 😅😅

  • @sna241
    @sna2414 жыл бұрын

    Amazing video! I like how you dived deep into the coding part.

  • @smashed5826
    @smashed58264 жыл бұрын

    Nice video! You are the first guy that when teaching coding looks like getting high :). I know CORS what, how, but still searching examples to tell me why in security angles

  • @abhishekpawar8458
    @abhishekpawar84583 жыл бұрын

    I'd got lost in documentation. Thank God, I found you

  • @Joodlett
    @Joodlett4 жыл бұрын

    Appreciate the energy you bring to the video, beats the usual dulcet tones on most!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Joodlett thanks 😊 I appreciate you noticing.. i try to lighten the mood in the videos. sometimes it works but sometimes ppl report it as distracting and I try to find the balance..

  • @Joodlett

    @Joodlett

    4 жыл бұрын

    @@hnasr works for me, I've subbed and I'll be sure to check out your channel!

  • @suyashpurwar8310
    @suyashpurwar83102 жыл бұрын

    You are doing a great job sir! Keep posting! Literally wondering why I discovered your channel so late.

  • @ParveenSharma-ee9gl
    @ParveenSharma-ee9gl10 ай бұрын

    Thanks for the practical introduction to CORS. Great video

  • @ConsuelaPlaysRS
    @ConsuelaPlaysRS4 жыл бұрын

    Great content & fun to watch - good job being yourself. The bit where you were trying to pronounce "granular" was pretty funny, especially when you said "goddamit" under your breath. Keep it up!

  • @adityanagesh4922
    @adityanagesh49223 жыл бұрын

    I like your videos first then starts watching. Never regretted. 🙂

  • @hnasr

    @hnasr

    3 жыл бұрын

    Yay! Thank you!

  • @sviatoslav8776
    @sviatoslav8776 Жыл бұрын

    Very clear and full explanation man. Thank you for your work.

  • @crhoads1024
    @crhoads10244 жыл бұрын

    This video is fantastic in explanation and I cant wait to explore the rest of your videos! Keep up the great work!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Chris Rhoads thanks Chris for your comment! Enjoy the content have a great weekendd

  • @mahyarazad
    @mahyarazad3 жыл бұрын

    You're so awesome, man. I do enjoy your explanation about CORS.

  • @schnasndasn1504
    @schnasndasn15044 жыл бұрын

    Thank you very much for this awesome tutorial. I finally understood it fully. Your accent is great and a pleasure to hear :)

  • @hnasr

    @hnasr

    4 жыл бұрын

    😊🙏 thanks!!!

  • @ultiumlabs4899
    @ultiumlabs48993 жыл бұрын

    It helped me a lot understanding CORS, thank you Hussein

  • @Hussain-su7dg
    @Hussain-su7dg2 жыл бұрын

    Thank you so much Hussain,you make amazing videos .Please never stop that ,its so helpful to understand at the "granular"😛 level .Loved it

  • @marydzekh7590
    @marydzekh75907 ай бұрын

    Thank you very much for this extremely detailed and straight-forward explanation! 7:42 SERVED SUCCESSFULLYYYY - this one has made my day🤣

  • @ihor_biedin
    @ihor_biedin2 жыл бұрын

    The video is awesome! Thank you Hussein.

  • @threeone6012
    @threeone60123 жыл бұрын

    Best video on CORS. Nice job!

  • @gomesbcc
    @gomesbcc8 ай бұрын

    Perfect explanation, example guided. Love it. Thanksss

  • @hellaren
    @hellaren4 жыл бұрын

    Great material! I was frightened by those errors for a long time until now (: Thank you, Hussein!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Anton Starostin no more fear!! Its true with everything in life, everything looks scary until you clearly understand it and can articulate it

  • @andrescastillo2863

    @andrescastillo2863

    4 жыл бұрын

    @@hnasr very nice Hussein

  • @akshaykrishnan4778
    @akshaykrishnan47784 жыл бұрын

    Great content! On OSX, if you hover on the green full screen button on the top left of a window, it allows you to split screen. Nice and easy way to prevent all the window switches.

  • @hnasr

    @hnasr

    4 жыл бұрын

    Thanks for the tip! I ll use it for sure

  • @cyberguide_in
    @cyberguide_in3 жыл бұрын

    Crystal clear! Love your teaching method!

  • @hnasr

    @hnasr

    3 жыл бұрын

    Thank you 🙏

  • @csrescued1299
    @csrescued12993 жыл бұрын

    Thank you very much @hussein...i've been struggling to understand CORS concept and you really did clear that through An epic example :) Again thanks to you, I really mean it

  • @manishsharma9490
    @manishsharma94903 жыл бұрын

    Super video!! you made this concept really very clear to understand! :)

  • @alexhek
    @alexhek3 жыл бұрын

    Great explanation and tutorial, thanks! I love your energy 😀

  • @KDOERAK
    @KDOERAK3 жыл бұрын

    two years later, still a great video!

  • @hnasr

    @hnasr

    3 жыл бұрын

    ❤️❤️

  • @hell-o8470
    @hell-o84702 жыл бұрын

    Thanks a lot. Got to know soo much about cors. Also, I like your way of teaching 💯

  • @grantwilliams9838
    @grantwilliams98384 жыл бұрын

    Thanks for that Hussein. What an awesome vid. Wish I had of found this channel way before now.

  • @hnasr

    @hnasr

    4 жыл бұрын

    Thanks Grant! Enjoy the content !

  • @obadzafar6731
    @obadzafar6731 Жыл бұрын

    Thank you, your explanation is just wonderful. more power to you.

  • @Sendilien
    @Sendilien Жыл бұрын

    If you go to watch another video in the series, you might see that they are just giving the answer to the actual problem right away. That way no-one can learn. Instead after watching those videos, one might find himself looking through another reference or watching another video. But your way of making intentional mistakes and sound-changes like "zzzz" while zooming out and in are really fun. So, only if there are more tutorials like this out there to make the learning curve funner and more adventurous. Now, don't need watch another one)

  • @kappaj01
    @kappaj014 жыл бұрын

    Seriously great stuff Hussein!!! Stunning explanation

  • @hnasr

    @hnasr

    4 жыл бұрын

    Thanks Andre!! Cheers and have a great day.

  • @randydouglas434
    @randydouglas4343 жыл бұрын

    I don't know Python yet, but this was super helpful for understanding my CORS issue. Thanks!

  • @jeremywang3877
    @jeremywang38774 жыл бұрын

    Dude, I LOVE your content and your humor! Sub instantly here!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Thanks CJ for the love ❤️ glad you enjoy the content 😊

  • @alphabeta4149
    @alphabeta41494 жыл бұрын

    Thank goodness, someone who makes IT videos without sounding like a robot fucked a dictionary. Bless you bro. Will be back for more. Subbed!

  • @hnasr

    @hnasr

    4 жыл бұрын

    I laughed so hard 😂 thanks bro

  • @mbradleyanimation
    @mbradleyanimation4 жыл бұрын

    I love your enthusiasm!

  • @omerrot
    @omerrot4 жыл бұрын

    Great video! well explained,simple to understand. Thank you Hussein.

  • @hnasr

    @hnasr

    4 жыл бұрын

    omer Thanks Omer for your comment! Glad it was useful. Let me know what questions I can answer or what software engineering concept would you like to see next

  • @willieb.1746
    @willieb.17462 жыл бұрын

    thank you for this tutorial, it is very helpful to see these concepts of SOP and CORS in a ral simple example

  • @labixiaoxin1307
    @labixiaoxin13073 жыл бұрын

    Take the time to watch this video of 23 minutes, and then you won't need to waste time anymore to understand cors in the future. A well-explained detailed long video is way more valuable than 100000000000 short 2-3 minutes not well-explained videos / articles, because you're gonna watch them again again again and again and still don't get it, until the end of your life.

  • @ismelitomalonzo5519
    @ismelitomalonzo5519 Жыл бұрын

    Thank you. Your presentation helped me a lot.

  • @bydesign5384
    @bydesign53844 жыл бұрын

    Very in depth walkthrough. Thanks!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Thanks 🙏 let me know what topic should I cover next!

  • @vardaanaashish7266
    @vardaanaashish72664 жыл бұрын

    Great explanation! Thank you!

  • @cameronsmusicretreat
    @cameronsmusicretreat4 жыл бұрын

    Fantastic explanation, love the enthusiasm!! :D

  • @hnasr

    @hnasr

    4 жыл бұрын

    and I love ❤️ your comment!

  • @aaabbb-qv4ff
    @aaabbb-qv4ff4 жыл бұрын

    Nicely explained. You could go to the point more often, but it is very good presentation. Thanks!

  • @hnasr

    @hnasr

    4 жыл бұрын

    aaa bbb thank you so much! Yeah I need to work on getting to the point quicker. Definitely will consider in next videos ..

  • @99rellik
    @99rellik5 жыл бұрын

    Thank you. This was very informative and very useful.

  • @hnasr

    @hnasr

    5 жыл бұрын

    Sean Turner thanks Sean for watching. Glad you enjoyed the content :)

  • @amiturfnd
    @amiturfnd4 жыл бұрын

    Best cors video ever. Thanks sir.

  • @AnkitKumar-rt4it
    @AnkitKumar-rt4it5 жыл бұрын

    Very Nicely Explained. Loved the tutorial. :) :)

  • @hnasr

    @hnasr

    5 жыл бұрын

    Ankit Kumar thanks for watching ! Glad you enjoyed the content

  • @ivanvelastegui4512
    @ivanvelastegui45123 жыл бұрын

    Take your like my man, awesome explaining!

  • @waynewatson7970
    @waynewatson79704 жыл бұрын

    you sharing Hussein helps out so much, thanks

  • @hnasr

    @hnasr

    4 жыл бұрын

    Wayne Watson thank you Wayne! Glad it helps!

  • @yonihod199
    @yonihod1993 жыл бұрын

    Explained brilliantly!

  • @MrRorypam
    @MrRorypam4 жыл бұрын

    Really Great . Clearly this explains. Thank you so much

  • @Jesus51451
    @Jesus514515 жыл бұрын

    Like the way you presented the topic even though it was a bit lengthy and had to watch it at 1.5x speed ;)

  • @hnasr

    @hnasr

    5 жыл бұрын

    Tomek Luzak thank you so much for watching! I agree and Im working very hard to make my videos shorter and to the point. 🙏 thanks again

  • @fairchild9able
    @fairchild9able2 жыл бұрын

    Thanks for making this . Very good!

  • @IchHerzRock
    @IchHerzRock4 жыл бұрын

    habibi i love u. your tutorials are like a good movie

  • @eddiegomez4134
    @eddiegomez41344 жыл бұрын

    Super helpful & entertaining! Thanks for this!

  • @hnasr

    @hnasr

    4 жыл бұрын

    Thanks Eddie!!

Келесі