Hello everyone this is Akshan and in this video we will be covering CORS which stands for Cross Origin Resource Sharing. So I will start this video by talking a little about CORS and then we will talk a little about what is Cross Origin, what is how actually browser deals with it and what is actually a pre-fright CORS and then options call and how does the browser handles all this resource sharing and then we'll also jump up to the course error which you often get and then how to resolve that error and also about how this question is asked a lot of times in interviews and how to answer them. So all these things will be covered in the video so stay tuned and then so without wasting any time let's move.
So, CORS is a mechanism which uses additional HTTP headers to tell the browser whether a specific web app can share resources with another web app. But, but, but the major important point to note over here is that both the web apps should have different origin. So suppose if they have same origin then they can share resources very easily. But if they don't have the same origin then they need to follow the course mechanism.
Long back when the course was not standardized, browser never allowed web applications to share resources between different origins. So by origin what do I mean is suppose we have a domain name akshaysaini.in. So browser did not allow this origin to share resources with other origins. So what do I mean by other origins? Suppose akshashani.in wants to request some data or some files or anything from some other domain.
Suppose akshashani is trying to access google.com or something. Google.com slash API slash get data something. So this was never allowed.
So this was. was not allowed not to a different domain and also even if access any dot n is trying to call subdomains suppose API dot access any dot in This was also not allowed and neither different ports. So suppose akshaseyani.in is making request to akshaseyani.in and some other port suppose 5050 this was not allowed and neither different protocols were allowed. So suppose this is HTTPS and it is HTTP and akshaysehri.in this was not allowed So, but after this course became a standard, then now browsers do allow all these things and to get data from the different domain was a major chunk. Like, see, now the world has become like the world is moving on to microservice architecture where we have different set of small, small, loosely coupled applications which are deployed on some different servers, hosted on some different domain, different ports.
And that's how... the things like large-scale applications are built these days so this resource sharing is very important and that's why after this course mechanism is now a web standard now we can share resources So this is what all about the course and a brief idea about what course cross origin resource sharing is. And now let's move on to what type of questions are asked in interviews and what type of different scenarios are there which you should know being a developer. That is what we will cover next.
So first of all let us see the first question which is how this course thing works. Like how does resource sharing between two web applications work. Suppose we have two apps on different domains. and they want different domains or you can say different origin so this is origin 1 and this is origin 2 and so now they want to share resources so how do they do that so suppose this is the app a this is app b so now when the course is standardized what happens when the a is requesting something from b so what happens is generally a course pre-flight mechanism is followed so what do i mean by course pre-flighters A preflight options call is made before the actual API call is made.
So suppose this wants to post data, some post data or make a post call to B. So what will happen first is a preflight call will be made. And the browser now uses like the mechanism of course uses additional HTTP headers to verify this request first. So suppose A is the first one.
Dave wants to make an actual post call. So what will happen is browser itself will make a pre-flight call first which is also called as an options call. And then the server which is B over here takes the responsibility of verifying whether this call is valid or not. So if this call is valid then B will set some additional headers, additional HTTP headers.
which will let the client know or the browser know that okay this is safe and then the actual post call or actual call is made. So before making this actual call a pre-flight options call is made and the server sets some HTTP headers, sends some additional HTTP headers along with the request and once the browser receives it then only it will make an actual call. So by this way the resources are shared and this is what happens behind the scenes in CORS.
And that is how resources are shared. So there could be many more questions like what is preflight, what is options call, what is additional HTTP headers. So yes let's talk about some additional HTTP headers.
So when the call is made the server sets up some headers. So the most commonly and majorly used headers are except except Accept control. Allow. Origin So this header is set by the server and it can have different values. So generally suppose when we make a general API or which is a public API.
So generally what we do is the server sets this header as a star. So what does this star means that any domain outside of that domain can access this. Or if they want to restrict it to some specific domain then what they do they generally directly write the domain name.
Suppose this origin2 is google.com. This is akshesheni.in. So what will happen is if this server sets this header as akshesheni.in then This domain is allowed to make call to be and that call will be fulfilled that pre-flight options call will be validated and then the actual call will be made. So that is how everything is followed.
So apart from these except control allow origin there are more HTTP headers such as access control allow methods so there could be different methods which could be restricted the methods like get, put, post, delete. and other methods right so there is a way so that the server can restrict the specific methods which can be accessed and we have more such headers but these are most important so these could also be asked like what type of headers are there and these are basically the things which are commonly asked in interviews so now when we understood about course leaf right so my next question would be does all the requests which is made from A to B. follow this course pre-flight or this pre-flight call is made for all requests so the answer is no so there are two type of again access control mechanisms so one is the simple request and one is the pre-flight request so so some request browser automatically tags them as a simple request where the browser will not make a pre-flight call before making the actual call but directly make it so it follows some specific criteria you can go ahead and then read it on the MDN docs.
So a lot of time we encounter in our browser console that it says that no access control allow origin header is present in the requested resource or something like that. So that is what we say as a course error. But actually we should not say it as a course error. It is like it should happen, right?
So it is a normal standard, web standard protocol which is used, which is actually making web secure. So it's not a course error, but yeah, it is. it comes because generally we make an error while following that mechanism so that's how it is so it's not an error it is the expected behavior by the browser and that is how it is so to resolve that what we can do is generally set that header from the server and then the request will be fulfilled so sometimes while doing some local development or something where local is a different origin than the actual server and the server is not allowing local to hit. Generally what I have seen some developers they do is there are some specific plugins for Chrome which comes by which browser bypass all these course filters and apart from this plugin one more way is to start Chrome with a flag of some disable web security something.
The Chrome that particular web session will be whole without course and that is actually bypassing the web security what Chrome has. So, I would not suggest you to do that. The best way is to follow this course standard and let's work how the web standardized, right?
So, as of today, according to MDN, all the major web browsers have this mechanism of course, they support and this is the list of browsers which are supporting course mechanism. and almost all are there right so there shouldn't be an issue so that was the browser support about course one thing i wanted to tell you that we deal with course a lot in our day-to-day life as well so while we are just building such large-scale applications there are different microservices are sitting on different domain different hosts different ips and whatnot so this makes a very important and hot interview question and it is being asked a lot of times in interviews these days so So you should prepare it and these type of questions will be asked and you should be ready for it and read more about it on MDN Docs. It is like proper thing is given on that given on that one single page. I'll post the link in the description also.
So that was all about in this video and if you like this video and got to learn something from this video then do give it a thumbs up and also stay subscribe to my channel and press the bell icon. That is very important so that you get all the notifications of upcoming videos and you don't miss any videos. I am now regularly making videos and would love to see you again.
So that's all for now. Thanks for watching.