CORS issue resolved in just one line of Code | How to call API from React without CORS issue | Proxy

hello guys welcome back to the channel so today we are going to discuss one of the issue that is beating the head of every developer so that is course issue so course is simply like cross origin resource sharing okay so uh for an example what i need to show here is i have created one app using react.js okay so i'm creating simple form uh that actually takes the data from the api okay and then it binds to this react.js form and then it should show me but it is not showing me the data is not getting displayed here okay so i have created one api okay this api what simply does is it takes the data from the database related to the employee and it display me okay the same data i'm going to consume in the react this application but that is not happening so let's see what is the result it is returning here in the api okay so if you see it is returning me all the results in the json format uh employee id employee name series salary and data joining okay now i'm not getting this data here in this form okay so uh if you say this uh this is the code which i have written okay so if you see i'm using this url of the api to consume the data binding the response to the employee and then using this employee uh features like all the employee components not components all the employee columns you can see employee id name ct and salary and try to get that in this form but it's not happening so let's inspect and see what is the issue it is throwing okay so uh let me just uh refresh it so that you can see the issue so it has it is it is hitting this api endpoint perfectly that is fine but somehow i'm not able to like get this uh response because if you see it is uh uh returning this error message access to fetch at this one so this is my api endpoint okay i'm trying to fetch api endpoint from this one this url is your browser url for the react app okay this has been blocked by the course policy no access control allow origin header is present on the requested resource okay so you might have faced this issue multiple times you might have uh like gone mad with the internet solution still you're not able to solve this issue okay so i have found some solution okay uh that that is of just two lines so what you need to do here is uh you need to cut this url until api okay so basically you are taking the url of that url of the browser of that api where your api is hosted okay so what we can do here is we can go to the packet.json file okay by taking this particular url and then we can create a proxy so let's create one proxy here and give that url here okay whatever we have taken back from the uh js file okay we can make one backslash there okay so that is fine now make sure you are saving both the files package.json file as well as employee component file okay once you save it and try to reload it it should give you the data okay so i have reloaded it so it has hit the api and let's see what is the response we are getting now so if you see we are getting that data here okay uh let's let's i mean these things are showing from the previous run okay so let's uh remove everything let's remove everything and let's try to refresh it okay so that we can see what is the url it is hitting and like what we are getting okay so i'm trying to refresh it so it is going to hit the api again okay so let's rephrase it it has hit the api okay we are going to get the data again so let's go to the network and see uh we are successfully able to hit the api see the request url right and in the response we are getting the response data in form of json so same data we are binding here in the react js component okay so there is no blocked request you can see and in the console also all those cost policy error has been gone so this is how within two steps we can solve this issue okay so if you are like facing some issue then follow this and you will be able to successfully resolve it so thank you guys for watching if you love this content then do subscribe the channel

Channel: The Engineer's Desk

Views: 12,772

Keywords: cors error, cross origin resource sharing, cors explained, cors issue in react, cors issue in react js, how to resolve cors issue in react, how to resolve cors issue, enable proxy in react, how to call api in react js, how to call post api in react js, proxy error in react, cors issue resolved, access-control-allow-origin header not working, cors js, react cors error, fix cors error, react cors issue, cors error in react js, fix cors error in react, react tutorial

Id: sPrkv_gzE2E

Length: 4min 9sec (249 seconds)

Published: Sun May 15 2022