How To Fix CORS Error In React Js? (2022) | Solved!!

in this video i am going to show you everything you need to know about course so that you never get into such types of errors here is a simple example of a course error as you can see i am inside of my react.js and we have app component where we are calling fetch method which means it is accessing our server and trying to get some data and it's trying to print that data out i am using map method to print the data and i am using node.js as backend and an express server to send the data and as you can see when we are trying to fetch the data from localhost 5000 where our server sits to localhost 3000 where our client sits it's saying that we cannot fetch that because of course so we need to fix course and in order to allow a request to go from client to server and in order to allow the communication between client and server we are going to be using a library called course so first of all we need to install cores in the server that will help us to allow the incoming request from client side so just open the terminal inside vs code and just write the command as npm install course and after we install course let's open index.js file and let's import codes at the top after that let's write app.use and pass our course inside that and this is a function and the first thing we are going to pass to it is our origin and this is the origin of the client that we allow course and this takes a string so we will pass our client url so my client is running on localhost colon 3000 which is the default url that react uses now as we already have our server running and when we save you can see it actually prints out the data instead of giving us a course error because we have allowed to accept any request coming from this url as origin so our server is saying hey if you are coming from this origin then we allow any request to come up but let's say this is 3001 that is now a different origin so now we are getting that error because it's saying hey you are not equal to the allowable origin so i hope it makes sense now this works great when it comes to things like get and post request so you can put all of these inside an array to our methods so it means now it can accept request coming from our client side whether it should be a post request or get request also you can mention put and delete as well so guys that's it for this video i hope you find this video helpful for more videos like this please subscribe to my channel at last thanks a lot for watching and i will see you in the next time [Music] [Music] you

Channel: CodeWithMasood

Views: 38,699

Keywords: how to fix cors error in react, how to fix cors error, how to fix cors error in javascript, cors issue, fix cors, cors policy, cors, react cors, how to solve cors in react, how to solve cors problem, react cors issue, cors issue in react, solve cors in react, cors react js, react js cors, how to solve cors in react in 2022, react, solve cors in node js, node js cors install

Id: iqQZjHYpO38

Length: 3min 2sec (182 seconds)

Published: Thu Jul 28 2022