Cross Origin Resource Sharing (Explained by Example)

have you ever taken an image url and then you put it on your website and that image becomes a broken although you take the same url and you paste it into a new browser and that image opens fine have you ever written a javascript code and when you try to execute it you get this error or maybe this error or maybe this error right so all of these are a result of what is called cross-origin resource sharing okay a resource have certain policy to be shared with certain domains and this is what we gonna discuss by example with code and all that stuff and when are you gonna get an error and where are you how do you actually fix it i'm going to talk about pre-flight options and all these kind of stuff in this video but if you're new to my channel welcome this is my name is hussein and i discuss software engineering by example and uh i have talked about a lot of software engineering topic my main specialty is geographic information system where we discussed actual geographic information uh tutorials and with arcgis but i also talk a lot about databases i talk about python programming i talk about a lot of software engineering topics like uh proxies and and and uh stateful versus stateless and a lot of other stuff so consider subscribing if you're new to this channel and with that said let's jump into the video all right guys so the first thing we want to do is uh spin up a very simple web server that only serves uh get response all right so i'm going to use python for that because it's really compact but you can pretty much use node.js express to do the same exact thing so it's very easy to read as you can see there is one application i am going to run it it's going to listen on port 888 and it's going to tell me that and when someone makes a request to they get a get request right to this slash which is the root which is host in this case or the machine name slash on the port 888 i will get served this text so it's a text back okay it's a very simple thing so let's go ahead and run this so it can show you right and we can take it from there okay so now my application is running on port 8888 so let's go ahead and then execute a new browser 8888 and as you can see i'm getting back the results that i expected correct served successfully okay so what happened here is the same browser requested immediately to that site okay and it was returned so let's show you some debugging here so you can actually see so let's go ahead and refresh and immediately i can get the results you can see that the function got cold and you can step into it it's pretty cool visual studio code is the best thing so you go ahead and just write that back and that will just loop and send back the results which is here served successfully okay and that's applicable that is allowed because you are currently on the same domain you are executing this request from the same domain right because you are localhost 8888 you are the same thing okay however let's try to go to my website husseinus.com and let's simulate that i am going to execute that same request but from this site instead and it's very easy to do that i can inject some code here but you can as easily just open the console the developer tools individual chrome and chrome and you can essentially write the code which requests right so let's go ahead and do that and that's the fetch command okay if you do fetch then you do http localhost 8888 which is the same request right and all you have to do is just do hey when you get the results i am expecting text and then literally just print that thing okay so that's the fetch command which is a built-in uh uh this is the new version of the xml ajax stuff which is like from 20 years ago right so this is the new stuff the fetch command you can call it pretty much from any browser so if i do that again i am going to get the uh this uh debugger but if i do that and then go back you can actually see actually there is an error right let's see if you can guys if you read there it says access to fetch at localhost 8880 from origin jose nasser.com has been blocked by course policy why because no access control allow origin header is present on the requested resource okay so the requested resource we have successfully if you think about it okay we have successfully reached the resource but the browser denied you the response because the three source did not al uh kinda did not have the the this header that allows it says hey if you don't see that hitter that means only i can access this okay only localhost 888 can see and consume this resource if you see that then that result essentially uh can also access that resource so what's the solution right the solution is it's very simple okay since they are expecting a header and for security reason you want that right you want people from hussein nasser.com to make requests to your resource which is in this case localhost it could be any other site right think of it this way okay what you're gonna do is essentially do self dot set header and then literally that's the header we want right but what's the value of the header what what do we want in that is this is exactly what we want we want hussein nasser.com if someone is coming from hussein nasser.com or the same origin as the hosted resource which is localhost eight eight eight eight then they're cool could uh allow them to consume that so let's let's go ahead and try that okay so now it's just restarted that if you notice and then if i do that what we're going to do is we'll set the header we'll return that header back and then we will write that result okay so now we're actually getting that result back served successfully that is a pretty cool and then if you go to network in in in uh in chrome you can actually see right so the first request did not have that it had only content link content type the second request actually had that and then the browser says huh hussein nasser allow origin husseinos.com where is this request coming from it's coming from jose naso.com you're good but let's go to google.com and then let's do the same thing let's try to make a request from google.com to our resource okay let's do that if i do that then same thing it's gonna send you the resource do you guys think it will succeed or what no it fell with a different error this time says hey i do see access control allow origin header but it has a different value than the value that you are calling from you are coming from origin https google.com right but the header al says like only hussein nasser.com uh is actually allowed to make a request to this resource i'm sorry i'm gonna i'm gonna block you okay so that's another way you can prevent that so how can we fix that how can we allow everybody to make a request it's very hard it's very difficult to do that okay that's how you do it it's a star all right it's a universal thing okay just do an asterick instead all right and that's the code for python right but you'll find for node.js it's slightly different but it's the same thing you set the header with the exact thing i don't want you guys to set randomly hitters that you don't know what's going on i want you to understand why you are sitting each header each hitter means something each line of code means something and that's where we try to preach in software engineering by example and i geometry right you get an you you don't copy and paste code guys from stack overflow yeah i gotta understand what's going on all right so all right so now we understand that so let's make a request there's an asterisk let's see if we can actually make that if we go back ooh served successfully all right are you guys ready for the next thing okay what are we going to do next the next thing we're going to do is we're going to do more stuff okay we're going to do so so so far what we did is we explored the ability to make a simple request like this one our comply our request did not have fancy headers if you think about the request the request has the method and and pretty much uh what is it yeah request headers didn't have much origin refer that's it but now i'm gonna make a fancier request okay and fancier requests are basically have you can add headers and you will need to add headers at some point right headers like uh for example one of the famous headers are uh x requested with right and this tells the web servers that hey this request is coming from blah okay it's just metadata it's just information okay but you can add pretty much any header you want here as long as the web server understand it but one of the headers that actually papier is we need to add so in the fetch command here we're going to add another json object here comma json object and one of the objects here is called headers okay and header is just an object right uh of uh right so we're gonna add a header of type content dash type okay and that content type is i'm gonna lie here okay i'm gonna say the content type is json slash application okay i'm just i'm not used to the zooming guys so sorry about that so learning okay so now i sent our quest but this request the browser says hello wait a second oh you're doing some complex stuff son all right i i can't let you send that i have to check with the server if he or she or they allows that or not okay so how do we do that right we're getting an error what's going on here guys what's going on options what the hell's options what's options okay so let's let's understand this what's going on here the first request that we made that was a simple request he says like okay all right son you're trying to make a simple request you're trying to make a get request it's a get okay let's just send it and see what the server responds and if we noticed immediately we were we were immediately got here but now if you have noticed we did not hit the break one at all so our code did not get executed the browser did something fancy it tried to do something else what did the browser do here okay so that's the question we're trying to answer so this is what's called a pre-flight request and the browser do that the browser does that when you try to send a complex request like this one okay a request that the browser is not really sure there's a lot a list of a lot of things that uh options are sent right so what what happens here is the browser says okay you're sending a content type json application i can't just send that maybe you're trying to do flood the server with stuff i can't let you allow to do that i have to ask the server if that's even permissible okay so that's what the application did okay so the browser actually sent an options method so i don't know if you're familiar with methods http methods are get post put delete i've never seen delete used actually or put for that matter but post and get us the most used one options is used out but it's all hidden right options is used primarily but by the browser to just let the browser the servers know hey what what what can i do with you what is allowed because that's that that's that that's the utility of options essentially and what happened here when it failed essentially it says the server responds hey what is options i have no idea what what is that so it says like method not allowed this application responded with method not allowed because guess what i did not implement that options method in my web server okay so now guys if you're using like an apache tomcat or iis most of this stuff is configurable you don't write that code for you but i do recommend guys you dive deep into the raw web server application write it from scratch to and fully understand what's going on right so if you write this and go back to ios oh it all makes sense all these configurations make sense you can configure everything in iis by the way all right let's not go back uh let's not uh get away off uh yes stay let's stay online guys all right so how do i do that okay i need to implement options okay define options and literally what you do with options is uh you can set a status the options usually is uh is an is an empty response you don't send anything in the body you just send headers back telling the browser you want this very light remember this is an expensive call the browser makes so you don't send a lot of garbage back right you only send information that is absolutely required so let's do that okay so sit uh what not sit here sit status the status says 204 which means nobody i think all right and then you do self-doubt furnish which just says hey i'm done okay i believe you can do it without that but just having that let's see what will happen now let's actually put a breakpoint here how about that and restart this thing and then you come here and then let's go back to these and then let's make a request again oh look at that now it's sketching now it's catching nice nice all right so now we're just calling the options sending it back was that enough guys you think that was enough no sir it was not so now we're getting a different error okay i'm sorry if that video is long but i like to just explain everything guys okay this kind of video is that you don't just you try to understand the whole thing okay access to fetch at localhost 888 it is from origin google has been blocked right and the reason is response to pre-flight request does not pass access control right why no access origin [Music] is presented and that makes sense that's the first error we got guys remember that's the first exact error we got it wasn't there it says hey you did not give me that request right because we were right that that wasn't there remember the code got executed here we did not send that header back right so to send that header back copy and paste okay now we get getting into duplicating but that's easy to fix don't worry about it i just want to don't worry about the code and how pretty it is now just like worry about what's going on now okay let's do this now it's just like hey if you executed options now we just we're gonna let them that hey okay access what what what did you ask it says access control origin okay guys i added that for you all right now what are you gonna allow me to execute that okay options let's go back what we got another error and that is the error that we want here okay so the first one was the course right the cross origin resource policy the second one was okay the browser says hey okay i can call this option method right so the first order was you don't even have the options method we implemented the option method right so the browser returned hey you're okay there is an option method okay but the second one says okay oh i got optional method but you don't have this header i want to know if i can call you or not okay am i allowed to call you we added that but now we get the third error which is now says hey i am trying to send a request called with a header called content type remember the content type that's what we're trying to send like a json application right but the server did not say that it's okay right because what did the server response let's see what did the server responds the server respond with oh that's not yeah that does look a little old let's make a request again okay this is the server spooned it with no content right and that's that's what we did we implemented that and we responded with the axis origin but we're not allowed the content type we need to see if i can make the content type or not so how do we do that right and that we need to allow content type essentially right so and that is essentially what is called the access control allow headers okay so what we need to do is we copy this guy we paste it and then we say this header is now access control allow headers what kind of headers do you allow okay and then you say content type is allowed and then you start commas operating and adding more and more headers okay let's see that content type is now okay you can't send me a content type you can also specify that hey you can only send me content type of type json or protocol buffers or whatever you can you can go that fine with latte i can't pronounce that word granello god damn it granola okay as you can notice that guys the english is not my first language so there is some trouble here okay all right so you get the allow origin everybody is allowed so it's an open house content type is allowed and no oh did you see that did you see that ooh that is amazing okay now we go back and we execute get because now you're cool right so now i would imagine there was a result look at that guys that's amazing okay so what do we learn today we learned a lot of things right we learned that the there are the course actually is a very rich functionality it's a it's a rich policy and you have to understand all these kind of headers and errors and headers and like and based on like now that you understand the constant any error you get you can just dissect it and just try to make your web server start to accept that okay you can you can get into a lot of kind of errors i'm not i can't go through all of them but any anyhow guys i hope you enjoyed this video if you did enjoy it hit that like button subscribe and hit that notification bell to get a lot of software engineering by example content all right check out this channel check out my podcast i talk a lot about uh geographic information systems and uh it's auto engineering too all right uh and i'll see you on the next one you guys stay awesome

Channel: Hussein Nasser

Views: 96,097

Rating: 4.8980141 out of 5

Keywords: Software, cross origin resource sharing, enable cors, cors error, cors policy, Cross Origin Resource Sharing, Cross Origin Resource Sharing (Explained by Example), fetch api, No 'Access-Control-Allow-Origin' header is present, OPTIONS 405 Method not Allowed

Id: Ka8vG5miErk

Length: 23min 14sec (1394 seconds)

Published: Sat Jan 19 2019