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!
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.
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?
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
Wow, this helped me a lot to comprehend this topic. I have one question left though: Why is there Cors Policy by the Browser in the first place? What does it prevent/protect? The api can still be called from outside a browser or I guess there are Browsers that don't enforce the Cors Policies. So how does it protect the Api? Or is this to protect the user in some way?
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?
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
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.
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?
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
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... :/
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
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.
@@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!
I appreciate that you didn't cut the video when you encountered an error. It demonstrates what happens in real-world coding.
Cool thanks :-)
You explained in 13 mins what I spent hours reading and not comprehending. Thanks!
Glad it helped Doran!
whole day I was struggling with this :)) your explanation was clearrr, thanksss
Glad it helped! :-)
i merge to the crowd, great video. thanks. I like when you solve the problems in real time, without editing.
No problem!
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!
Cool thanks Tedis 😀
Thanks for this amazing tutorial. it clarifies my knowledge about CORS
You are welcome! Cheers Mark
Props to this guy for live coding.
Thanks Micah :-)
Thanks a lot, I was scratching my head a lot over this but you explained it briefly yet comprehensively
Hi Mujthaba, glad it was helpful 😀
More simplified, thanks a lot for great explanation.
Very clear explanation, thank you kind sir!
Welcome :-) Cheers Mark
man, thanks a lot for sharing this knowledge. You made this topic very clear to me now!
phenomenal explanation!
Awesome stuff! Thanks for being so clear and the example was very easy to follow:)
Finally, i get it! Thanks.
Glad it helped! Cheers Mark 🙂
wonderfully explained.TYSM
Glad it was helpful Shivaram! Cheers Mark :-)
Great explanation. Thanks!
You're welcome!
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.
Excellent, glad it helped Arijeet :-)
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?
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
th-cam.com/video/pDU_jnD2XpE/w-d-xo.html ; different Anisha I assume :-P
Wow, this helped me a lot to comprehend this topic.
I have one question left though: Why is there Cors Policy by the Browser in the first place? What does it prevent/protect? The api can still be called from outside a browser or I guess there are Browsers that don't enforce the Cors Policies. So how does it protect the Api? Or is this to protect the user in some way?
Thank you!!! I really appreciate the video!
Glad it was helpful Aric :-)
best tutorial out there
Thanks!
Watched once subscribed twice.
Awesome video
Thanks! Cheers Mark 🙂
Great video. Helped a lot. Thanks mate :)
Glad it helped :-)
well explained! thanks
Glad you liked it Timur :-)
very good explanation
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?
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
yes, you can find extensions in chrome store that disable CORS
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.
Yep that's a good summary I'd say😀
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
it was very helpfull, thank you!
Glad it was helpful! Cheers Mark
One question - maybe anyone knows: Why can i not log out the json response one the first .then method?
Thanks great video :)
Glad you liked it Louise. Cheers Mark :-)
thx very clear!!
Thanks Erdem :-) glad it was useful.
Nice explanation ❤
Glad you liked it Thisura :-)
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?
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
@@Ashotofcode thanks!
Thank You very much. 🤘
Thanks SM, glad it was useful 😀
shot & easy. Thanks
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... :/
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
WoW, Thank you so much!
Thanks for making the video
Thank You 👍🏻👍🏻
Excellent ! Thanks !
well done
Thanks :-)
Arrow functions return by default if code is on the same line.
Nice thanks Valetin!
Thanks bro
Welcome 😎
amazing
Thank you! Cheers!
Thanks..
Welcome
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.
audio is very low volume, I wish it wasn't that low
❤
Confusing for me...
RIP, SWAPI
D'oh yep it has died!
@@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!
@@dartme18 Ah yes, swapi.dev, cool thanks!
please explain with diagram
=> return
Ah yes that one gets me a lot! thanks
I closed the video immediately after seeing Microsoft Edge being used....
lol fair play :-)
+
very poorly explained, uses tools people may not be familiar with, the actual subject is almost ignored