Dealing with CORS in ReactJS

#javascript #react #cors

In this post we will discuss 2 methods to resolve the issue 'Access to fetch at 'Client' from origin 'Server' has been blocked by CORS policy, NO 'Access-Control-Allow-Origin' header is present on the requested resource...'

For security reasons, The Same-Origin Policy is implemented on your web browser to block malicious attempts to access data, because of this, when we build a client on localhost:3000 and server on localhost:8000 for example we face this CORS issue.

In ReactJs we can use the proxy property on package.json file to resolve this as shown below (125.0.0.1:500 being the server URL)

"proxy":"http://127.0.0.1:5000"

However if we are to resolve this from the server side then, go to the particular endpoint we need cors allowed, then add 'res.set('Access-Control-Allow-Origin','/ClientURL)'

`app.get('/cors', (req, res) => {
res.set('Access-Control-Allow-Origin', 'http://localhost:5000');

})`