how to setup proxy with vite — A MacBook with lines of code on its screen on a busy desk

How to Setup a Proxy with Vite: A Step-by-Step Guide

by

If you’ve ever built a frontend app with Vite and tried to call a backend API during development, you’ve probably run into CORS errors. The fix is straightforward: configure a proxy in your Vite dev server. This guide walks you through exactly how to do that, from the basic setup to more advanced routing options.

Why You Need a Proxy in Vite

When you’re running Vite’s dev server on localhost:5173 and your API lives on a different origin — say localhost:3000 or even a remote server — the browser blocks cross-origin requests by default. Rather than wrestling with CORS headers on every backend route, you can tell Vite to forward matching requests through its own server, making them appear same-origin to the browser.

This is especially useful when working with REST APIs, GraphQL endpoints, or any service you don’t fully control. It’s a local dev-only solution, so it has no impact on your production build.

Basic Proxy Setup in vite.config.js

Open or create your vite.config.js (or vite.config.ts for TypeScript projects) in the root of your project. Here’s a minimal example:

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
})

With this config, any request your frontend makes to /api/users or /api/products will be silently forwarded to http://localhost:3000/api/users and http://localhost:3000/api/products. The browser never sees the cross-origin request — Vite handles it server-side.

Advanced Proxy Options

The shorthand above works for simple cases, but Vite’s proxy config (powered under the hood by http-proxy) supports a richer object format:

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

Here’s what each option does:

  • target — The destination server for matched requests.
  • changeOrigin — Sets the Host header to match the target. Required for many hosted APIs and virtual-hosted sites.
  • rewrite — Lets you strip or transform the path before forwarding. In this example, /api/users becomes /users at the backend.

Proxying to HTTPS or Remote APIs

If your target uses HTTPS — common when developing against a staging server — you may need to handle self-signed certificates:

'/api': {
  target: 'https://staging.example.com',
  changeOrigin: true,
  secure: false
}

Setting secure: false tells the proxy to skip SSL certificate verification. Only use this in development — never disable certificate checks in production environments.

If you’re regularly working against remote APIs or scraping data, you might also find our free proxy list useful for testing different network routes without spinning up your own server.

Proxying WebSocket Connections

Some apps — chat features, live dashboards, real-time feeds — rely on WebSockets. Vite supports proxying those too:

'/socket.io': {
  target: 'ws://localhost:3001',
  ws: true
}

Just set ws: true and point to your WebSocket server. Vite handles the protocol upgrade automatically.

Common Mistakes and Quick Fixes

  • Proxy not triggering: Make sure your frontend fetch calls start with the exact prefix you defined (e.g., /api). A mismatch in the path means the proxy rule never fires.
  • Still getting CORS errors: Double-check changeOrigin: true is set. Some APIs reject requests where the Host header doesn’t match the target domain.
  • 404 from backend: If your backend doesn’t have an /api prefix on its routes, use the rewrite option to strip it before forwarding.
  • Proxy works in dev but not production: Vite’s proxy is dev-server only. For production, configure reverse proxying at the infrastructure level (Nginx, Caddy, etc.).

Protecting Your Dev Environment When Using Remote APIs

When proxying to external or third-party APIs during development, your real IP address is exposed to that service. If you’re testing against rate-limited APIs or services that block certain regions, connecting through a VPN is a clean solution. NordVPN (try it free for 30 days) lets you route your dev machine’s traffic through servers in dozens of countries, which can unblock restricted endpoints and keep your home IP out of API logs.

Should You Use Vite’s Proxy or a Dedicated Dev Proxy Tool?

For most single-project setups, Vite’s built-in proxy is all you need — it’s zero-dependency and configured in one file. If you’re running multiple frontend projects or need team-wide proxy rules, tools like Nginx in Docker or mitmproxy give you more control. But for day-to-day development against a local or staging API, vite.config.js proxy config is fast, reliable, and requires no extra installs.

If you’re also working with IPTV playlists or media streaming tools alongside your Vite project, check out our M3U playlist checker — it’s another browser-based tool that can simplify your workflow without additional software.

Photo by Christopher Gower on Unsplash

Leave a Comment