Cors Error in React

CORS Error in React

Cross-Origin Resource Sharing (CORS) is a protocol that allows scripts running in browser clients to interact with resources from different origins. This is useful because JavaScript can only call URLs that have the same origin as where the script is running, thanks to the same-origin policy followed by XMLHttpRequest and fetching. For example, if a JavaScript app needs to make an AJAX call to an API running on a different domain, the same origin policy will prevent it.

Solution for CORS Error in React

The first solution for CORS Error in React is that you can tell your React app to forward requests to your server using the proxy property in your package.json file.

This is a simple one-step process. Go to your app's package.json file and add the following property:

After restarting the React dev server, we can see that all requests go to localhost:8080 instead of localhost:3000. Transferred the React development server to the backend server. The above works for third-party services as well.

Under the hood, when a React app requests a resource from localhost:8080, it pretends to request it from the origin localhost:8080 instead of localhost:3000. This seems to match the browser's SOP and no longer causes CORS Error in React.

Let's say you're using a service at https://randomservice.com and you get a CORS error. You can add the URL inside the proxy property of your package.json file.

The development server tries to send the request to the proxy without text/html in the Accept header.

So for the above method to work, you need to make sure there is no text/html in the server's Accept header. In rare cases, you may need to specify multiple proxy URLs. You can manually configure the proxy using the HTTP-proxy-middleware package by following the instructions here.

Another solution for CORS Error in React is to create a proxy middleware for creating this following these steps.

Add the add setupProxy.js file to the src directory and add the following code block.

Now, like in the previous step, all requests starting with /api from your react app will be intercepted by the middleware and served from http://localhost:8080/api.

Method to Setup CORS Request in React App at Front End Level

• Axios:
  Axios every time uses the Uniform Resource Locator(URL) to initiate the request, and the browser knows that the HTTP OPTIONS request is made to itself first. Often, a token needs to be passed for certification, and it is found by the bearer. The body must pass an additional CORS header. I need this because the browser needs to check with the server if it is allowed to access the resource.

• Fetch:
  Use the mode option and set it to cors while fetching.

Create a New React App

Let's create it with the following command:

After creating the project folder, switch with the following command.

For getting the API data, we used Axios. You have to install it by passing the command:

Demo of CORS options for ReactJS. Write down the following code

index.js:

App.js:

Now run the application by passing the following command on the terminal

Output:
Open your browser. It will by default open a tab with localhost running (localhost:3000).

Explanation:

You can see there are no CORS errors in the console. So you have successfully mastered CORS Error in React.

Beyond JavaScript Basics: Our Full Stack Web Developer Course Guides You Through Advanced Techniques. Enroll Now & Transform Your Coding Expertise.