How to configure proxy in vite

Configuring proxy in Vite is a straightforward process that can be achieved by modifying the vite.config.js file in your Vite project. In Vite, proxy configuration is handled via the proxy option within the server configuration. Here's a basic example of configuring proxy:

First, open the vite.config.js file in the root directory of your Vite project.

Then, add the server section to the configuration object and configure the proxy option within it:

javascript
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      // Using string shorthand notation
      // All requests starting with '/api' will be proxied to http://example.com
      '/api': 'http://example.com',

      // You can also provide detailed configuration
      '/another-api': {
        target: 'http://another-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/another-api/, '')
      }
    }
  }
});

In the above configuration:

• /api: This is a simple proxy configuration where all requests starting with /api are forwarded to http://example.com.
• /another-api: This is a more detailed configuration that includes the target server address, sets changeOrigin to true (which is typically necessary for hostname checks), and provides a rewrite function that replaces the /another-api prefix in the request path with an empty string, so the original proxy path is not included when forwarding to the target server.

You can define multiple proxy rules in the configuration, matching and forwarding requests based on your needs.

Remember to restart the Vite development server after modifying vite.config.js to apply the changes. Vite's proxy functionality is based on http-proxy and allows you to easily proxy specific API requests to other servers.

Here's another example of configuring proxy in vite.config.js:

javascript
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      // Using string shorthand notation
      '/api': 'http://localhost:3000', // All requests to `/api` will be proxied to `http://localhost:3000/api`
      
      // Using object notation for more configuration options
      '/api2': {
        target: 'http://localhost:3001', // Target server
        changeOrigin: true, // Controls the value of the host field in request headers
        rewrite: (path) => path.replace(/^/api2/, ''), // Rewrites the request path, removing `/api2`
        // Additional http-proxy options can be added here
      },
      
      // Add other proxy rules for different paths
      '/other-path': {
        target: 'http://other-server.com',
        changeOrigin: true,
        // Other configurations...
      }
    }
  }
});

In the above example, we have configured three proxy rules:

1. When the request path starts with /api, the request is proxied to http://localhost:3000 with the request path unchanged (e.g., /api/user becomes http://localhost:3000/api/user).
2. For requests starting with /api2, the request is proxied to http://localhost:3001 with the /api2 prefix removed (e.g., /api2/user becomes http://localhost:3001/user).
3. The last rule proxies requests starting with /other-path to http://other-server.com.

With this configuration, you can set up appropriate proxy rules to handle backend API requests during local development. This resolves cross-origin issues and simulates a production environment with frontend-backend separation.

In Vite, configuring the proxy primarily involves setting it up in the vite.config.js configuration file. By configuring the server.proxy option, you can specify which API requests to proxy. Vite's proxy functionality is based on http-proxy, allowing you to easily proxy certain API requests to other servers.

Here is an example of configuring proxy in vite.config.js:

javascript
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      // Using string shorthand
      '/api': 'http://localhost:3000', // All requests accessing /api will be proxied to http://localhost:3000/api
      
      // Using object format for additional configuration options
      '/api2': {
        target: 'http://localhost:3001', // Target server
        changeOrigin: true, // Controls the Host header value received by the server
        rewrite: (path) => path.replace(/^/api2/, ''), // Rewrites the request path, removing the /api2 prefix
        // Additional http-proxy options can be added here
      },
      
      // Add proxy rules for other paths
      '/other-path': {
        target: 'http://other-server.com',
        changeOrigin: true,
        // Additional configurations...
      }
    }
  }
});

In the example above, we have configured three proxy rules:

1. When the request path starts with /api, the request will be proxied to http://localhost:3000, and the request path remains unchanged, for example, /api/user will be proxied to http://localhost:3000/api/user.

2. For requests starting with /api2, they will be proxied to another target server http://localhost:3001, but due to the rewrite configuration, the /api2 prefix is removed from the request path, for example, /api2/user will be proxied to http://localhost:3001/user.

3. The final proxy rule handles requests starting with /other-path, proxying them to http://other-server.com.

By configuring these rules according to your development needs, you can effectively proxy backend API requests during local development. This resolves cross-origin issues encountered in local development and simulates a production environment where the frontend and backend are decoupled.