![proxy.png](https://blog.radicalloop.com/uploads/proxy_4672d0d1d0.png)

If you've ever developed a frontend application in React and tried to connect it to a backend API, you may have encountered the dreaded CORS (Cross-Origin Resource Sharing) issue. It’s a common roadblock, but there’s an easy way to avoid it during development using the `proxy` setting in your `package.json`. In this blog post, I'll explain what CORS is, how the `proxy` setting works, and why it's helpful for developers.

----

### Understanding CORS (Cross-Origin Resource Sharing)

CORS is a security feature built into web browsers to prevent web pages from making requests to a different domain than the one that served the web page. It’s a safeguard that ensures only allowed web pages can access your server’s resources. If you have a React app running on `http://localhost:3000` and it tries to fetch data from an API on `http://localhost:5000`, the browser will block it because the two URLs have different ports, making them cross-origin.

The result? You get an error like this:

```
Access to fetch at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy.
```


So, how do we get around this problem during development? This is where the `proxy` field in `package.json` comes in handy.

---

### What is the `proxy` Field in `package.json`?

The `proxy` field is a configuration option available when using `create-react-app` (CRA). It allows you to specify a backend server for your React app’s development server to proxy API requests to. Essentially, the React development server (running on `localhost:3000`) will forward API requests to a different server (like `localhost:5000`), making it seem as if they are coming from the same origin.

This setup helps you avoid the CORS issue without changing the backend server’s configuration. It’s only meant for development, and it’s not used in production.

---

### How to Use the `proxy` Field

To set up the proxy, follow these simple steps:

1. Open your `package.json` file in your React project.
2. Add a `proxy` field at the top level, specifying the backend server’s URL.

```json
{
  "name": "my-app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}
```

In the above example, any API request from your React app that is not handled by the frontend routes will be forwarded to `http://localhost:5000`. For instance, if your React app makes a request like fetch('/api/data'), it will be proxied to `http://localhost:5000/api/data`.

--- 

### How It Works Behind the Scenes

Let’s break down what happens when you use the `proxy` field:

1. **Request Interception**: When your React app (running on `localhost:3000`) makes an API request to `/api/data`, the React development server intercepts this request.
2. **Proxy to Backend**: The development server checks the `proxy` field and forwards the request to `http://localhost:5000/api/data`.
3. **Response Handling**: The backend server processes the request and sends the response back to the React development server.
4. **Response Forwarded to React**: Finally, the React development server forwards the response back to the browser, making it seem like the request originated from `localhost:3000` instead of `localhost:5000`.

This approach makes it look like both your frontend and backend are on the same origin, eliminating CORS issues during development.

---
### Limitations and Considerations

While the `proxy` field is convenient for development, it’s important to remember its limitations:

- **Not for Production**: The `proxy` field is only used by the React development server and won’t work in production builds. In production, you’ll need to configure CORS on your backend server.
- **Backend Server Must Be Running**: The backend server (e.g., `http://localhost:5000`) must be up and running for the proxy to work.
- **One Proxy Target**: You can only specify one proxy URL in the `proxy` field. If you need more complex routing (e.g., different proxies for different API endpoints), you’ll need to use tools like `http-proxy-middleware`.

---
### Final Thoughts

Using the `proxy` field in `package.json` is a simple and effective way to avoid CORS issues during development. It helps you focus on building your app without worrying about cross-origin problems. However, it’s crucial to handle CORS properly in your backend for production to ensure secure and reliable communication between your frontend and backend servers.

If you’re building a React app and frequently run into CORS issues, give the `proxy` field a try—it’ll save you time and headaches during development!

---
At [RadicalLoop](https://www.radicalloop.com/contact), we excel at developing custom applications for web, mobile and desktop, leveraging the power of AI. Our expertise spans multiple industries, and we have served clients globally.

large_proxy.png

medium_proxy.png

small_proxy.png

thumbnail_proxy.png

proxy.png

Struggling with CORS issues in your React app? Learn how to use the proxy field in package.json to handle API requests during development without CORS headaches. This guide walks you through the setup and benefits of using a proxy for a smoother development experience.

How does "proxy" works in package.json?

Radicalloop