How to Configure Proxy in React for API Requests

To configure a proxy in React, add a proxy field in your package.json with the backend server URL. This forwards API requests from the React development server to your backend, avoiding CORS errors without extra code.

Syntax

In React projects created with Create React App, you configure a proxy by adding a proxy field in the package.json file. This field should contain the URL of the backend server you want to forward API requests to.

• proxy: The key in package.json that tells React where to send API calls during development.
• Value: The backend server URL, including protocol and port (e.g., http://localhost:5000).

This setup only works in development mode and helps avoid CORS issues by forwarding requests automatically.

json

{
  "name": "your-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000"
}

Example

This example shows a React app configured to proxy API requests to a backend server running on http://localhost:5000. When the React app calls /api/data, the request is forwarded to http://localhost:5000/api/data.

json + javascript

/* package.json */
{
  "name": "proxy-example",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000"
}

/* src/App.js */
import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('/api/data');
      const json = await response.json();
      setData(json.message);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>Proxy Example</h1>
      <p>{data ? data : 'Loading...'}</p>
    </div>
  );
}

export default App;

Output

Proxy Example
Hello from backend!

Common Pitfalls

• Proxy only works in development: The proxy field in package.json is ignored in production builds. You must configure your production server separately.
• Incorrect proxy URL: Make sure the URL includes the protocol (http:// or https://) and correct port.
• Using absolute URLs in fetch: If you use full URLs in fetch (like http://localhost:5000/api), the proxy is bypassed. Use relative paths instead (like /api).
• Backend CORS settings: Proxy helps avoid CORS during development, but your backend still needs proper CORS headers for production.

javascript

/* Wrong way: Using full URL bypasses proxy */
fetch('http://localhost:5000/api/data')

/* Right way: Use relative path to enable proxy */
fetch('/api/data')

Quick Reference

• Add "proxy": "http://localhost:5000" to package.json.
• Use relative URLs in fetch calls (e.g., /api/data).
• Proxy works only in development mode.
• Configure backend CORS separately for production.

Key Takeaways

Add a proxy field in package.json with your backend URL to forward API requests during development.

Use relative paths in fetch calls to enable proxy forwarding.

Proxy only works in development; configure production servers separately.

Ensure backend CORS settings are correct for production environments.

Incorrect proxy URLs or absolute fetch URLs can break proxy functionality.