web dev//dev proxy

A dev proxy is a rule in the frontend development server that forwards certain requests to another server (the backend) on a different port, and it is used to avoid CORS issues and to simulate the production environment, where everything lives on the same domain.

A dev proxy is a rule in the frontend development server that forwards certain requests to another server (the backend) on a different port, and it is used to avoid CORS issues and to simulate the production environment, where everything lives on the same domain.

With Vite and Wrangler, Vite runs on localhost:5173 (the frontend), Wrangler runs on localhost:8788 (the API and D1), and vite.config.ts holds the proxy:

TYPESCRIPT Copy

proxy: { '/api': { target: 'http://localhost:8788', }, }

The browser requests /api/contacts from Vite (5173); Vite sees /api/* and forwards it to Wrangler (8788), which queries D1 and returns JSON. The browser has no idea the response came from a different port. In production there is no proxy, because Pages serves the frontend and the API from the same domain.

A personal note26 · mar 10Read notevite proxies /api/* to wrangler on :8788. browser has no idea it's talking to two processes. this is the kind of thing that takes 40 minutes to understand and 3 seconds to configure. proxy: { '/api': { target: 'http://localhost:8788' } }. that's it. production doesn't need this because pages serves both from the same domain. the proxy only exists to make dev feel like prod. clean.