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 REST API integration in react application.
Checkout more articles on ReactJS
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.
- Enable the CORS at server side (How to enable CORS in Node.js)
- 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
Check the following article to configure multiple proxy.
How to set up a proxy for multiple APIs in React1. 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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.
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.
1 2 3 4 5 6 7 8 | { "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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
If I understand correctly, this method only works for development.
How would you avoid the CORS message for a production build? Or will this method also work for that?
Proxy is most suitable in the Development environment. You have to enable CORS from the backend service. Refer to this articles: https://www.cluemediator.com/tag/cors