AM Coder - Making Your Own Proxy Server to Avoid CORS Errors

hey everybody this is alex merced from alex merced coder.com and if you ever tried to make api calls from a to a third party okay in your front end applications you've probably had situations where a third-party api did not set up course permissions on their api which means you end up getting like a coors error that says sorry you um let me see if i can actually find a screenshot of one core there images you've probably gotten something that looks like this okay access to yada yada has been blocked by course policy no access control allow origin header if you've seen my video about cores or listen to my podcast about coors explain what cores or cross origin resource sharing there in depth i recommend listening to that um i'm not going to go over that whole thing right now but the basic idea is this the browser when it makes requests between websites these different urls with different hosts okay that's only looking at sort of this part so if they if this part doesn't match the the website that's making the request to the request part that they're requesting if these that part doesn't match the host it um then expects it makes what's called a pre-flight request where it says hey let me just check to see if uh i'm allowed to make a request here so if you ever actually explore the network tab of your browser so if you were to hit the dev tools ctrl shift i this part right here and you would make an api request somewhere you'll often notice that there's like two requests let me see if i can make an example um okay actually let me do this shift i refresh the page now let's see if i can get to do the thing okay see like here we're not getting it because it's like where it's making the request to here is the same as a host so it doesn't have to make that initial request but sometimes you'd see like it makes two requests and one of those requests will have like options as a method that's the what's called the preflight request which means it's not finding the right headers that's when he knows there's a problem so that fails and then it doesn't even bother make the second request um so if it's a third-party api though the place where you're supposed to be making these course headers that prevent this error is on the api itself so if it's not your api there's nothing you can do about it and that's usually by design they don't want you making they either don't want you making a request to their api without permission so you have to like pay get the right kind of security clearance to have them add you or they just don't want you making it in the front end because even if you get an api key from them and you expose your api key in your front end code someone can just go into your code so i can go right over here to your source code and like you know find all the stuff you know that makes up your code okay and i can find that api key or i can go to my network and see the requests that were made in your website and i can find the api key and then access your basically access that api as you so it's a security issue so they probably rather than you not make requests to their api from your front end code okay so the way to get around the course error is through what's called a proxy server it's not really a special type of server or anything this is the idea is that you have a server to communicate with other servers that's why it's called a proxy server proxy always just means the middleman so that's what i'm gonna talk about today so instead of me making the request in my front end code i'm going to make the request in my back end code so what i'm gonna do is i'm gonna go to my express folder where i have there we go uh where i have way too many projects already but we'll make another one um i'm just gonna make an empty folder i'm gonna show you how simple this can be proxy server i'm gonna open up this proxy server in integrated terminal i'm going to touch a server.js and i'm going to do a npm init-y so i get my package.json okay and then i'm going to npm install express try i think what else i might need um i fetch does not exist in node so you can't just use the fetch function like you can in the browser so you have to like install a library that brings it into play so node fetch is at library so express node fetch and okay i think that's really all i need um cool so huzzah okay so i'm gonna go to my server.js just set up my normal express boilerplate so const express equals uh require express const app equals express then we set up our listener app.listen on port 3000 and then we pass in a callback console.log listening on board 3000. there we go so essentially all i really need to do is just oh yeah i want to bring in a node fetch so const fetch equals require node fetch cool and that's it so now i just create a route app.get so i don't need i don't need any middleware because i'm not expecting to take any json in as a request if you are then you would need to accept the json middleware um i would i guess i would still technically need course middleware so i need to add my own queries middleware so npm install cores okay const cores equals require course okay and then i would just need to set up that core so that way we just don't get coors errors when you try to make a call to this api that would be ironic getting course errors when you're trying to avoid coors errors there you go that'll clean that up um okay app.get we're gonna say it's just the normal root route and we get a request response i'm gonna make this an async function so i can use um async await and i would just do this cons response equals fetch and then i need my api you endpoints so that's just going to be this there's got to be a string okay that's got to be a weight fetch because we were waiting i think awake and then const the data equals await response dot json and then what it would do we send back that data res dot json i mean yeah rez.json and then we would await data just in case okay and then it sends that data back as jason that's it okay um actually we can even make this more succinct we could just say res.json equals await response.json there we go that's even better okay i'm just going to return the result of that res.json and now let's test that out okay first we'll just test out to see if the route works period so i'm going to do uh node server.js okay listening on port 3000 let's go to localhost 3000 okay and see i get the data okay now the to test would be let's make another little mini front end so i'm going to create another folder okay not in there uh let's go i want it out here because it needs to be in a separate being served separately so we'll just call this html whatever okay and here i'm going to make an html file index.html i'm going to do the boilerplate here and we just use a script text you know it's too lazy to attach a separate javascript file so slash script and then let's try to make a request to our server so um i'll just use normal.then so i'll just say fetch http slash localhost 3000 um cool that's that dot then dot then res res.json dot then data console log the data okay so now we have that i'm going to open this up with live server let's see if that works okay let me open up the devtools see if we get that console log fail to load resources server respond with the path 404 well but hey we got the data see this right there so this is oh this is the favicon okay yeah there's no favicon that's fine but see the api call was it worked okay in that case we avoided the cores error for like if json placeholder would were to give us a course arrow we'd avoid it because it requests the json placeholder then come in through the browser so the browser wouldn't actually check for course headers i mean the our web server wouldn't check for course headers so it would just the request would just go through so our express server makes the request to our web server makes the request to to jsonplaceholder and then our frontend this index.html makes a request to our web server and we have the data so essentially what i'll have to do is deploy this server to let's say heroku and then i would just use that url in my front-end application and ta-da okay and i can you know you can design this in a way where it's like more adaptable we have to pass in the url and all that stuff so that way this can make any kind of api call oh you can you know sky's the limit you know it's all a factor of your imagination but that's essentially the idea behind like things like cores anywhere and other proxy servers all it's doing is you're making a request to a server who's making another request on your behalf so again there's the json placeholder api my express server is making a request to the json placeholder api and so when my index.html makes a request to localhost 3000 where my express server is running this route gets hit it makes the request a json placeholder it receives the response from jsonplaceholder it parses it as a json object then sends it back out to my frontend and my front end receives it that's it that's all it is that's all a proxy server is so if you're doing this in some other framework like like ruby with rails or a python with django you just have to learn how to make http requests in that language every language has their own kind of like equivalent of fetch you just have to figure out what that is um and you just do the same thing okay so in python you would just fetch the data send it back as a dictionary that's their object equivalent and ruby you would do a thing like fetch and then you would get back and you turn into a hash which is there like object equivalent and uh you go from there so my name is alex merced from alexitcoda.com again uh join the slack and uh discord community over there at devners.com subscribe to the youtube channel like this video share with friends have a great day and enjoy

Channel: Alex Merced - Full Stack Developer

Views: 1,958

Rating: 4.8139534 out of 5

Keywords: Programming, Javascript, PHP, Python, Go, Typescript

Id: 5CFafWpWwxo

Length: 12min 58sec (778 seconds)

Published: Thu Nov 19 2020