Proxy Server in a React App with Create-react-app and Vite

Setting up a Proxy Server with Create-react-app

Create-react-app is a popular tool used for quickly creating React applications. By default, Create-react-app comes with a development server that can be used to run your React app during development. To set up a proxy server with Create-react-app, we'll need to make use of the "proxy" field in the "package.json" file.

First, let's create a new React app using Create-react-app. Open your terminal and run the following command:

This will create a new React app in a directory called "my-app". Next, navigate to the "my-app" directory by running:

Now, let's set up a proxy server. Open the "package.json" file in your code editor, and add the following line:

This tells the development server to proxy any unknown requests to " http://localhost:3001 ". In this example, we assume that your backend API is running on port 3001. You can replace this with the appropriate URL for your backend API.

Once you've added the "proxy" field to your "package.json" file, save the file and restart the development server by running:

Now, any requests that your frontend client makes to the development server will be forwarded to the backend API at " http://localhost:3001 ".

Setting up a Proxy Server with Vite

Vite is a newer tool used for creating modern web applications. Vite comes with a built-in development server that can be used to run your application during development. To set up a proxy server with Vite, we'll need to make use of the "server.proxy" option in the "vite.config.js" file.

First, let's create a new React app using Vite. Open your terminal and run the following command:

This will create a new React app in a directory called "my-app". Next, navigate to the "my-app" directory by running:

Now, let's set up a proxy server. Create a new file called "vite.config.js" in the root directory of your project, and add the following code:

This tells Vite to proxy any requests that start with "/api" to " http://localhost:3001 ". In this example, we assume that your backend API is running on port 3001 and that your API routes start with "/api".

Errors When a Proxy Server Isn't Set Up Correctly

When you make a request from your frontend client to a backend API running on a different server, your browser might block the request due to the Same-Origin Policy. The Same-Origin Policy is a security feature in web browsers that prevents scripts from making requests to a different origin (domain, protocol, or port) than the one that served the script.

If you try to make a request to a different origin without a proxy server, your browser will block the request and return a CORS error. For example, if your frontend client is running on " http://localhost:3000 " and you try to make a request to an API running on " http://localhost:3001 ", you'll get a CORS error like the following:

Access to XMLHttpRequest at 'http://localhost:3001/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource .

This error occurs because the backend API isn't allowing requests from the origin of your frontend client. To fix this error, you need to enable CORS on your backend API server.

Another error that can occur when you don't set up a proxy server is a network error. For example, if your frontend client is running on " http://localhost:3000 " and you try to make a request to an API running on " http://localhost:3001 ", you might get a network error like the following :