Choosing rewrite over pathRewrite in Vite Proxy: What about dynamic target resolution?

Answer the core questions first

Can the target be a function?
No. In Vite 4.x/5.x the target property is defined as a string URL. Passing a function will throw a configuration error because the underlying http-proxy middleware expects a concrete host string.

When is a dynamic target evaluated?
Dynamic routing is achieved through the router option, which receives the incoming req and returns a target URL string. This callback is invoked for every request, so you can inspect headers, query parameters, or method to decide the backend.

Does rewrite preserve query parameters?
The rewrite function only changes the req.url path component. The query string is left untouched unless you explicitly remove it inside the rewrite logic. When combined with a dynamic router, the final request sent to the backend includes the original query string.

How to set it up

1. Define a static target as a placeholder; it can be any valid URL because the router will override it per request.

2. Implement a router callback that returns the correct target based on runtime data.

   export default defineConfig({
     server: {
       proxy: {
         '/api': {
           target: 'http://placeholder', // required but unused
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           router: (req) => {
             // Example: route by a custom header
             const env = req.headers['x-env'];
             if (env === 'prod') return 'http://api.prod.example.com';
             if (env === 'staging') return 'http://api.staging.example.com';
             return 'http://api.dev.example.com';
           },
         },
       },
     },
   });

3. Test the setup by inspecting the backend logs. The request path will be rewritten, and the query string will remain intact.

Key points to remember

• The target is static; dynamic routing must use router.
• The rewrite function runs on every request and only mutates the path.
• Query parameters are automatically forwarded; they are not affected by rewrite unless you strip them yourself.

Need more details?

To fine‑tune the router logic, you might want to log the incoming request path and headers. If the behavior still doesn’t match expectations, check the Vite version and ensure you’re using the latest stable release.