What is CORS?

Тәжірибелік нұсқаулар және стиль

CORS - Cross Origin Resource Sharing allows us to relax the security applied to an API. By default the Single Origin Policy applies and a website can only make calls to its own origin. In the case though where you have a sub domain or even some third party sites that need access to you API CORS allows us to provide this to just those specific sites without having to open up the API to all origins. In this tutorial video we look at some example APIs on the web today and how they handle CORS.
swapi.co/
api.chucknorris.io/
CORS will add the the response header [access-control-allow-origins] and specify which origins are to be permitted access. This can include a wildcard, which is how the above 2 sites handle this.
Then create our own sample API and show how to add CORS headers to allow access from other Origins. The example is created in dotnet core within Visual Studio.
It should be noted that CORS and SOP is something applied by web browsers and does not take effect in other applications. So a node console app would be able to access an API even though it is not from the same origin.
P.S Just joined buy me a coffee :-)
www.buymeacoffee.com/ashotofcode

Пікірлер: 96

  • @mib141345
    @mib1413453 жыл бұрын

    You explained in 13 mins what I spent hours reading and not comprehending. Thanks!

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Glad it helped Doran!

  • @mujthabahassan7614
    @mujthabahassan76144 жыл бұрын

    Thanks a lot, I was scratching my head a lot over this but you explained it briefly yet comprehensively

  • @Ashotofcode

    @Ashotofcode

    4 жыл бұрын

    Hi Mujthaba, glad it was helpful 😀

  • @joespinelli3604
    @joespinelli36044 жыл бұрын

    Awesome stuff! Thanks for being so clear and the example was very easy to follow:)

  • @suryakiran2207
    @suryakiran22074 жыл бұрын

    More simplified, thanks a lot for great explanation.

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

    man, thanks a lot for sharing this knowledge. You made this topic very clear to me now!

  • @tajsec498
    @tajsec4982 жыл бұрын

    whole day I was struggling with this :)) your explanation was clearrr, thanksss

  • @Ashotofcode

    @Ashotofcode

    2 жыл бұрын

    Glad it helped! :-)

  • @dhruvpatel6937
    @dhruvpatel69372 ай бұрын

    Very clear explanation, thank you kind sir!

  • @Ashotofcode

    @Ashotofcode

    Ай бұрын

    Welcome :-) Cheers Mark

  • @maspoetry1
    @maspoetry13 жыл бұрын

    i merge to the crowd, great video. thanks. I like when you solve the problems in real time, without editing.

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    No problem!

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

    phenomenal explanation!

  • @shivarammuthukumaraswamy7164
    @shivarammuthukumaraswamy71643 жыл бұрын

    wonderfully explained.TYSM

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Glad it was helpful Shivaram! Cheers Mark :-)

  • @BB855036
    @BB8550364 жыл бұрын

    Great explanation. Thanks!

  • @Ashotofcode

    @Ashotofcode

    4 жыл бұрын

    You're welcome!

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

    Finally, i get it! Thanks.

  • @Ashotofcode

    @Ashotofcode

    Жыл бұрын

    Glad it helped! Cheers Mark 🙂

  • @ninjarogue
    @ninjarogue3 жыл бұрын

    Thank you!!! I really appreciate the video!

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Glad it was helpful Aric :-)

  • @balapraneeth9708
    @balapraneeth97083 жыл бұрын

    Great video. Helped a lot. Thanks mate :)

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Glad it helped :-)

  • @tedisrozenfelds7630
    @tedisrozenfelds76302 жыл бұрын

    I liked that you failed couple of times and then debugged your own code. That actually showed some common mistakes that can be made and should be avoided!

  • @Ashotofcode

    @Ashotofcode

    2 жыл бұрын

    Cool thanks Tedis 😀

  • @mineralisk
    @mineralisk4 жыл бұрын

    Thanks for making the video

  • @sabithapoladi5620
    @sabithapoladi56203 жыл бұрын

    very good explanation

  • @giorgidzidziguri610
    @giorgidzidziguri6109 ай бұрын

    best tutorial out there

  • @Ashotofcode

    @Ashotofcode

    8 ай бұрын

    Thanks!

  • @ameyapatil1139
    @ameyapatil11394 жыл бұрын

    Excellent ! Thanks !

  • @jagadeeshg3756
    @jagadeeshg37563 жыл бұрын

    WoW, Thank you so much!

  • @micahnewsum3667
    @micahnewsum36673 жыл бұрын

    Props to this guy for live coding.

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Thanks Micah :-)

  • @unknownqweasd
    @unknownqweasd3 жыл бұрын

    it was very helpfull, thank you!

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Glad it was helpful! Cheers Mark

  • @daminduliyanage
    @daminduliyanage3 жыл бұрын

    Thank You 👍🏻👍🏻

  • @ttoktassynov
    @ttoktassynov3 жыл бұрын

    well explained! thanks

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Glad you liked it Timur :-)

  • @arfan8544
    @arfan85444 жыл бұрын

    Thank You very much. 🤘

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Thanks SM, glad it was useful 😀

  • @ashwinisidhu
    @ashwinisidhu3 жыл бұрын

    shot & easy. Thanks

  • @jig4576
    @jig45768 ай бұрын

    Awesome video

  • @Ashotofcode

    @Ashotofcode

    8 ай бұрын

    Thanks! Cheers Mark 🙂

  • @louisecrowe4968
    @louisecrowe49683 жыл бұрын

    Thanks great video :)

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Glad you liked it Louise. Cheers Mark :-)

  • @thisurathenuka8362
    @thisurathenuka83623 жыл бұрын

    Nice explanation ❤

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Glad you liked it Thisura :-)

  • @erdemarslan3371
    @erdemarslan33713 жыл бұрын

    thx very clear!!

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Thanks Erdem :-) glad it was useful.

  • @ArijeetSarkar7
    @ArijeetSarkar73 жыл бұрын

    It helped me understand what is CORS and I solved a real world problem. The problem was the origin doesn't support any headers and I was sending one. After I removed, it started working.

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Excellent, glad it helped Arijeet :-)

  • @iQCudi
    @iQCudi3 жыл бұрын

    amazing

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Thank you! Cheers!

  • @WolfgangPedain
    @WolfgangPedain11 ай бұрын

    well done

  • @Ashotofcode

    @Ashotofcode

    10 ай бұрын

    Thanks :-)

  • @tonyj4435
    @tonyj44354 жыл бұрын

    Thanks bro

  • @Ashotofcode

    @Ashotofcode

    4 жыл бұрын

    Welcome 😎

  • @ganeshk8682
    @ganeshk86823 жыл бұрын

    Thanks..

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Welcome

  • @YosepRA
    @YosepRA3 жыл бұрын

    So it's all about the back-end setting up CORS headers, and the browser will try to find these headers to determine whether there's CORS violation or not.

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Yep that's a good summary I'd say😀

  • @michi19935
    @michi199355 ай бұрын

    One question - maybe anyone knows: Why can i not log out the json response one the first .then method?

  • @anishamalynur7748
    @anishamalynur77483 жыл бұрын

    hey quick question one of the options to fix the error was "If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." could you explain this?

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Hi Anisha, good question, this would be if you simply wanted to check that the service existed, in that it returns a success code, but without any data. I'm not sure when this would be useful, but there are cases I guess. Cheers Mark

  • @dartme18

    @dartme18

    3 жыл бұрын

    kzread.info/dash/bejne/oniJwcyndJW-oKg.html ; different Anisha I assume :-P

  • @CryptoJitsu
    @CryptoJitsu3 жыл бұрын

    Great vid, thank you! QUESTION: When the API does not send back the response header [access-control-allow-origins]... I'm assuming it's still sending back the data in the response body... because the decision to show or not is being done by the receiving browser. This seems insecure and dangerous and something a hacker could get around, no?

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Thanks! Good question - Yes I think you are correct in that the data will be returned - the browsers are pretty solid though so I would think safe - this takes place internally in the browser so not something you can attack with Javascript really. Cheers Mark

  • @CryptoJitsu

    @CryptoJitsu

    3 жыл бұрын

    @@Ashotofcode thanks!

  • @jamesscott-nicholson3808
    @jamesscott-nicholson38083 жыл бұрын

    Thanks for the video, that's cleared it up for me nicely :). If CORS is something only handled by the browser, I suppose that makes it a fairly weak piece of security. Could a browser / extension be made that simply ignores CORS or injects in the necessary header?

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Thanks James, I'm not really up on the capabitilites of extensions, but they have full control so would think they would be able cause problems here yes. Cheers Mark

  • @abhijithk1397

    @abhijithk1397

    3 жыл бұрын

    yes, you can find extensions in chrome store that disable CORS

  • @MrParanos
    @MrParanos3 жыл бұрын

    Very clear and useful, yet there is still something my mind can't put hand on : in what are CORS useful ? Regarding how easy it is to go arount it... :/

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    CORS is actually more about relaxing the existing security, so by default only requests from your own site can be made, which is the same-origin policy. With CORS we can allow other sites to access also. So one good scenario is when our API is on a different domain to our website - in this case CORS will allows us to let the website access our API - as otherwise will be blocked by the same origin policy. Another case is simply a public API and we want to allows anyone to call it, say a weather api, by default it is restricted to just the domain it runs under, so we add CORS to relax this security and allow anyone to call it. So CORS itself is not something to get around - that is the same origin policy - which is pretty locked down in browsers. Cheers Mark

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

    Can cors be exploited if some token is in URL?? (GET METHOD) Arbitrary origin is reflected in response with ACAO & ACAC but the token is in URL

  • @dartme18
    @dartme183 жыл бұрын

    RIP, SWAPI

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    D'oh yep it has died!

  • @dartme18

    @dartme18

    3 жыл бұрын

    @@Ashotofcode Someone posted a duplicate pretty quickly after SWAPI died (that was six months ago I think?). Our company used SWAPI for interview exercises, so we were happy to see the replacement!

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    @@dartme18 Ah yes, swapi.dev, cool thanks!

  • @Derekbylck
    @Derekbylck3 жыл бұрын

    => return

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Ah yes that one gets me a lot! thanks

  • @JulienReszka
    @JulienReszka3 жыл бұрын

    audio is very low volume, I wish it wasn't that low

  • @aravind4444
    @aravind44443 жыл бұрын

    please explain with diagram

  • @ValentinTruta
    @ValentinTruta3 жыл бұрын

    Arrow functions return by default if code is on the same line.

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    Nice thanks Valetin!

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

    Confusing for me...

  • @ramiz3570
    @ramiz35703 жыл бұрын

    +

  • @addtyu6176
    @addtyu61763 жыл бұрын

    I closed the video immediately after seeing Microsoft Edge being used....

  • @Ashotofcode

    @Ashotofcode

    3 жыл бұрын

    lol fair play :-)

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

    The explanation was not deep enough, in this video you just explianed CORS is browser security policy stuff and seeing you tried it out for direct access on browser and via ajax call. It could be deeper to explain why browser needs this; what kind of attacks could be implemented if no this security policy on browser; What headers needs to be added to allow browser calls a cors resource, different browsers or same browser with different versions treat different headers to allow CORS; server side API header settings to control the access the resource in different scenarios etc.

  • @ronaldlogan3525
    @ronaldlogan35253 жыл бұрын

    very poorly explained, uses tools people may not be familiar with, the actual subject is almost ignored

Келесі