How to set up a proxy in React App

In this article, we will show you how to set up a proxy in React Application. Most of the beginners are facing the CORS issue while they are working with api" title="REST API">REST API integration in react application.

Checkout more articles on ReactJS

• AG Grid">How to add a loading in React AG Grid
• axios-with-react-hooks" title="PUT request using axios with React Hooks">PUT request using axios with React Hooks
• How to enable CORS for multiple domains in Node.js
• Top 8 popular npm packages for React and Node.js
• Google Analytics">Track events in React with Google Analytics

You may encounter the following CORS error.

CORS error

Access to fetch at ‘<BACK_END_URL>’ from origin ‘<FRONT_END_URL>’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Solutions

There are two ways to fix this issue.

1. Enable the CORS at server side (How to enable CORS in Node.js)
2. Configure proxy in react app

Here, we will see how to set up a proxy in the react app.

Set up a proxy in React App

1. Call an API from the create-react-app
2. Configure a proxy to resolve the CORS error
3. Output

Check the following article to configure multiple proxy.

How to set up a proxy for multiple APIs in React

1. Call an API from the create-react-app

In the first step, we will create a react app using the create-react-app and call the REST API to get the API response.

App.js

import React, { useEffect } from 'react';

function App() {

  useEffect(() => {
    fetch('https://3c872b93c048.ngrok.io/products')
      .then(res => res.json())
      .then(res => {
        console.log('Output: ', res);
      });
  }, []);

  return (
    <div>
      <h3>How to set up a proxy in React App - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></h3>
      <p>Open Console to check the logs.</p>
    </div>
  );
}

export default App;

In the above code, we have used the `https://3c872b93c048.ngrok.io` endpoint to call an API using the `fetch`. You can use the other packages to call an API such as Axios.

Recommended: POST request using axios with React Hooks

You will get the following CORS error on page load.

CORS Error - Clue Mediator

Let’s set up the proxy to fix the CORS error.

2. Configure a proxy to resolve the CORS error

Follow the 3 steps to configure the proxy in react app.

Step 1: Set the proxy attribute in the `package.json`. It should be `”proxy”: “<BACK_END_URL>”`. Assign only the endpoint of the API as a proxy.

package.json

{
  "name": "proxy-react-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "https://3c872b93c048.ngrok.io",
  ...
  ...
}

Step 2: Restart the react application by running the `npm start` command.

Step 3: Remove the API endpoint from the component code and use the pure routes.

App.js

import React, { useEffect } from 'react';

function App() {

  ...
  ...

  useEffect(() => {
    fetch('/products')
      .then(res => res.json())
      .then(res => {
        console.log('Output: ', res);
      });
  }, []);

  ...
  ...
}

export default App;

That's all you have to do.

3. Output

Now, run the react application and check the output in the browser console.

API Response - Clue Mediator

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository