Access to fetch at from origin has been blocked by CORS policy SOLVED in React JS

hi everyone in this video I'll be showing you  how to solve the error access to fetch at the   URL that you are trying to hit from the origin  has been blocked by cors policy so I'm getting   this error when I try to hit or fetch some data  from my backend URL so here you can see right   this is my react.js code where I'm trying to fetch  from this particular path and this path is present   in my node.js code over here and I'm just like  sending this sample Json as a response but I'm   getting this error so the easiest way to solve  this problem is by installing the cors package so   here you can see right I'm in npm so if you just  type npm install cors you'll be having this npm   package if you want more knowledge you can just  read throughout this so This has about 10 million   downloads per week so it's totally safe and good  so just copy this npm i cors go to your terminal   need to be in the folder where you have  your node.js code okay the server code   and in that you need to just run npm i cors  and just hit enter it will take some time to   install the package and in the meantime what  you're going to do is you can go to the top   you're not just import this package  exactly the same way that you do for   Express it's going to be const cors you  can name it anything equal to require cors alright and after this after the use of app  variable just come down it's going to be app dot   use you need to specify course with circular  bracket and this particular thing corresponds   to this variable name okay be careful there yeah  now I'm done save it and you have to save it and   stop your server and reload it again in case if  you are using nodemon like me just save it okay be   careful that you need to reload your server so I  will go to my front end now I will just refresh it   and yeah I'm in the console  let me just click on search   and this time I'm getting my employee Json  so I'm having name salary and stuff so I'm   sending this over here and I'm having my console  over here and this is the reason why I'm getting   my console now okay which means that my data  is successfully sent from the back end to the   front end so that's it guys this is how you  solve this error and do check the playlist of   my channel I have done many tutorials in C C++  Java python node.js react JS mongodb MySQL CRUD   operations as well as spring Boot and many  things so subscribe me thanks for watching

Channel: United Top Tech

Views: 6,470

Keywords: React js cors error, Access to fetch at from origin has been blocked by cors policy react, Fix cors error, Cors error, Recat js node js cors error

Id: VV30Z4pUrgw

Length: 2min 35sec (155 seconds)

Published: Sun Jul 02 2023