React Proxy | Easiest Fix to CORS Errors

if you're using create react app just add the proxy to your package.json if you're using parcel just create a proxy rp with your proxy in it and if you're using veet just add the proxy to your vconfig file and that's it that's how you proxy your requests to your backend api in development and avoid those cause issues now stick around for the rest of the video if you want a more in-depth explanation on how to proxy your api requests [Music] so let's say you have a server-side app that could be in any language or framework i'm going to use express and this server allows users to get a list of all users okay thank you copilot so our app literally just responds with users and we should probably put ids in here and which can pretend this is a real app and this data is coming from a real database but right now we have a server that returns a list of users so if i go to my browser and open up localhost 8080 slash users we should be able to see that list of users there they are so that all works great and then you have your frontend app and in this case i'm using veet but the tool chain doesn't matter that much and this app is going to need to display that list of users so we'll need some state for the users and then we'll need to actually display those users somehow that looks fine are those the same details name and email no it didn't have an email it had an age come on co-pilot and i'm going to add a little title in here let's call this our user app and we should be able to see this in the browser too at localhost 5173 for some reason so let's take a look at that and there is the user app but we can't see any users because right now it's just that empty array but that's fine but now we need to make sure that we actually load that list of users from the server when our application loads so i'm going to add in a use effect here and when this happens we're going to do an axios request i guess i should import axios and we are going to get our users from the server and remember the server is running on port 8080 and it's localhost so i'm going to need to go http localhost port 8080 slash users perfect then once that's done we'll set the users to be the data that comes back if there's an error let's console log it and i don't need to finally come on and that's it so when this app loads we should go grab those users that we know already works that will give us an array that we should render into a list of users so let's refresh this page and nothing happens so let's take a look at the console and all my calls we've been blocked and at this moment you might be wondering what is cause so if we check this out we get a bunch of documentation but cause is something we only have to think about when the origin of an http request is different than the origin of the location the request is being made what the hell are you talking about and an origin is the scheme in this case we're using http the domain in this case localhost and the port and in this case the server has 8080 and the client has five one seven something i don't remember five one seven three okay so although the scheme and the domain are the exact same in this case the port is different and that makes it a different origin the react app is being served up on a different origin than the server than the api and when my react app tries to make a request to my backend api that isn't allowed the browser isn't going to allow that unless my server side code says yeah that's totally fine a request from localhost 5173 is cool with me browser let this request happen unless the server does that the browser just isn't going to let it happen so we have this cause issue and you might try and fix this issue by going down a cause rabbit hole where you go to your server and you try and add cause middleware and you might end up doing something like that to allow requests from any front end or you might actually specify localhost 5173 or localhost 3000 more likely but before we do anything like this we really need to step back and think about how our front end and our back end are gonna work together and how they're gonna communicate in our production environment because my back end is an express app and in development it runs on port 8080 on localhost using nodemon but in production it's not gonna run on localhost it's gonna run somewhere on the internet and i'm probably gonna access it with a real domain like whateverdomain.com my react app is running on port 5173 and should probably be running on port 3000 because i have a development server set up through veet and any tool chain that you use with the react app is gonna serve up your react app through some development server but this is just for development this isn't how your app is gonna work in production we don't use the dev server we don't use port 3000 we just have to get the html css and javascript that is your react app onto the internet somehow vt and all the other special tooling goes away in production and there's many ways of hosting these front-end static assets but one plan is just to build the front-end application into the html css and javascript copy those files onto the server and just have your server serve those up to your users so in this case i would just have my express app serve my react static files so if i go to myapp.com in the browser i'll get my react app static files but if i go to myapp.com users in this case i would get this json response so most of my response is going to be json responses but if i just make a request to the root i should serve my react app but to make the difference between my json api endpoints and my react app more clear i'll probably do something like put slash api in front of anything that is part of my json api so the root is just for my react app and then slash api is my json api and this is a pretty simple way of deploying a react app because in the end you only have to deploy one thing you just deploy your server with all of the static react assets as part of your server and a nice side effect of this is that we don't have to deal with cores anymore because we're always going to have the same origin we're just hosting one app we'll have one domain name and the origin will be the same for the react app and for the json api and at the end of this video i'll show you how to actually deploy this to railway using this technique but let's get back to the react app so i know i'm going to be serving this react app from the same origin as my server and when i do that i don't need to specify any of the origin stuff if this is on the same server i can just say go to slash users it's going to be the same origin slash users and actually it should be slash api users in this case and if i go and reload this page again i'm going to get a different error message which is 404 not found because slash api slash users doesn't exist on my react app dev server and that's because it's searching for slash api users on my react app dev server instead of my express app and in production i have a plan for this i'm gonna make sure that my react app is served from my express app but in development i need a different plan to kind of mimic this behavior while keeping my react app development server separate from my express app server so my plan is basically gonna be to trick the browser into thinking that these two apps are on the same server so if i make a request to slash api users although it's going to go to my express app which has a different origin i want the browser to think that it's the same origin as my react app dev server and in a veet application i just have to find the v.config.js and add a server parameter here which has a proxy parameter which has slash api which is going to forward to localhost 8080 because that's my express server and this is the simplest way of using the vproxy you can get way more fancy you can use regular expressions and do a whole bunch of other things but this is all i need and all it's saying is any request that starts with slash api that should be forwarded to localhost 8080 which is my express app but the browser is going to think that it's still part of my react app that they're still the same origin but behind the scenes we're going to forward everything onto the express app and if you're using create react app then you just open up your package.json and you add proxy and then where you're proxying to so in this case localhost 8080 if you're using parcel you can create a dot proxy rc file and just dump in this bit of code right here it really doesn't matter what your tool chain is you'll most likely have a way of creating a proxy to your back end and i'll leave some links to the documentation in the description of this video so what this means is that in my react code i get to write code like this where i just make requests as if they're on the same origin slash api users is going to go to my express server at a different origin but the browser is going to think that the same origin in development and then in production i'm just going to make sure they're the same origin so now if i go back and refresh this page it's not going to work and i think that's because when i change something in my veet config i might have to restart the server so let's try this again refresh and there we go i have my application and here are my users coming from my api and if i clear this real quick and then refresh the app i should see that when i make a request to slash api users my browser thinks that i'm making that request to my react apps dev server but really it's being forwarded to my express app and i'm getting my express apps response here and i can prove this by modifying this just a little bit let's see if we can add another user in here is copilot going to help me id3 jackd28 done okay so i've updated my back-end server my express server running on port 8080 but this should still work just as if it was part of my front end app because we're forwarding all the requests that start with slash api to my express app so no more cause issues and i get to write my requests as they will appear in production so i get to omit that origin completely which is really nice so this is working in development but let's see how we actually make this work in production but before we do that make sure you subscribe to this channel so you don't miss any future videos like this one the first thing we need to do when we want to deploy a react app is actually build that app so we're not going to use the dev server anymore we're going to run yarn build to build this down into its html css and javascript files that we can actually deploy with our server and once we do that we should get this little dist folder here which has the index.html and any other assets that we need so i'm going to just take this disk folder from my front-end react repo and copy this straight into my express back end here so my express app now has this disk folder then in my server.js i'm going to remove this fake path here and i'm going to say app.use express.static and this is going to be the dist folder so now a request that comes in to slash index or just slash in this case will serve up the react app so we could test this by opening up localhost 8080 i know that if i go to slash api users i'll get that array of users but if i just go to localhost 8080 which is my express application i should see my react app being presented here and this isn't the jsx and all the stuff in apps.jsx or anything like that it is just that dist folder just what was compiled when i ran yarn build so if i make any changes in app.jsx if i add a few more p's here this won't appear in my express version of the application because this will only get what i've built at that time so if i made a change to my front end and i want to be able to see that in production on my express app i would have to go and rebuild my front end application and then delete the current version of dist and re-copy dist into my back end like that and now i'll see those updates on my express server so this is important because this is the thing that's going to be deployed into production i still have this on localhost but now we can actually deploy this to the internet as one single application just an express app that we're deploying i'm gonna deploy this app using railway and before i do that i'm gonna set this up as a github repo user app for youtube video i'm gonna make this private so i'm probably gonna delete this after but i'm going to create a github repo for this and then i'm going to add this as a repo so i'll go over to my back end here get in it how to get ignore get add everything get commit a stupid message add my origin get push dash u origin master okay so my app should now be on github and it doesn't contain my dist folder why doesn't it contain my dist folder did i put dist in my git ignore well that's not what i wanted okay well let's get rid of that uh stupid commit message again okay now i should have there we go my entire express app with that dist folder which means that if i deploy this to something like railway which i'm going to do right now deploy from github repo it should have everything in there there's my user app deploy now that looks like it was successfully deployed so if we go to settings generate a domain real quick then this should be the app in a moment when it actually finishes deploying there we go so there is the entire app all i have to do is deploy my express app and if i go to the root of that i will get my react application but if i went to something like slash api users i'll see the json api so i have my react app and my json api as one express application that i can now deploy anywhere and there are many ways to deploy a react app this is not the standard way isn't a suggested way it's just one of many ways but if this happens to be your plan for deploying your react app to proxy your api requests is a really nice feature that your tool chain has [Music] you

Channel: Sam Meech-Ward

Views: 31,341

Keywords: react js, react proxy cors error, react proxy to backend, react proxy server, react proxy not working, react proxy cors, react proxy express, react proxy url, react proxy, react proxy vite, react proxy parcel, create react app proxy, react cors proxy, react cors error fix, react cors policy no access-control-allow-origin, react cors, deploy react app, deploy react app with express server

Id: N4yUiQiTvwU

Length: 15min 51sec (951 seconds)

Published: Mon Aug 29 2022