vite.config server.proxy: proxy API calls in the dev server

server.proxy makes the Vite dev server forward matching requests to another server. With '/api': 'http://localhost:8080', the browser calls http://localhost:5173/api/users on the same origin as the page, and Vite passes the request to your backend: no CORS headers needed in development. The option affects only vite (dev) and vite preview, not the production build.

Example

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      // /api/users -> http://localhost:8080/api/users
      '/api': 'http://localhost:8080',

      // /auth/login -> https://auth.example.com/login, with the Host header rewritten
      '/auth': {
        target: 'https://auth.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/auth/, ''),
      },

      // WebSockets
      '/socket': { target: 'ws://localhost:8080', ws: true },
    },
  },
});

Options

Pitfalls

• Keys are matched as path prefixes; keys starting with ^ are regular expressions.
• Requests go through the proxy only when the page calls a relative URL (/api/...). A hard-coded http://localhost:8080/api bypasses it and hits CORS again.
• In production you need the same routing from your web server or hosting (for example an nginx location /api/).