Vite proxy - how to setup

Vite proxy - how to setup

To set up the proxy in Vite you have to add a proxy option to the server object in the Vite configuration file (vite.config.js):

export default defineConfig({
  server: {
    proxy: {
      // string shorthand for simple case
      '/foo': 'http://localhost:4534',
      // with options if you need to use change origin
      '/api': {
        target: 'http://someapi.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // with RegEx for path matching
      '^/fallback/.*': {
        target: 'http://someapi.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // Using the proxy instance
      '/api': {
        target: 'http://someapi.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy will be an instance of 'http-proxy' so you can do whatever you want here
        }
      },
      // Proxying websockets or socket.io 
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true
      }
    }
  }
})

Vite uses the "http-proxy" library under the hood. Have a look at the documentation here.

Options

  • target: URL string to be parsed with the URL module

  • forward: URL string to be parsed with the URL module

  • agent: object to be passed to http(s).request (see Node's¬†https agent¬†and¬†http agent¬†objects)

  • ssl: object to be passed to https.createServer()

  • ws: true/false, if you want to proxy WebSockets

  • xfwd: true/false, adds x-forward headers

  • secure: true/false, if you want to verify the SSL Certificates

  • toProxy: true/false, passes the absolute URL as the¬†path¬†(useful for proxying to proxies)

  • prependPath: true/false, Default: true - specify whether you want to prepend the target's path to the proxy path

  • ignorePath: true/false, Default: false - specify whether you want to ignore the proxy path of the incoming request (note: you will have to append / manually if required).

  • localAddress: Local interface string to bind for outgoing connections

  • changeOrigin: true/false, Default: false - changes the origin of the host header to the target URL

  • preserveHeaderKeyCase: true/false, Default: false - specify whether you want to keep letter case of response header key

  • auth: Basic authentication i.e. 'user:password' to compute an Authorization header.

  • hostRewrite: rewrites the location hostname on (201/301/302/307/308) redirects.

  • autoRewrite: rewrites the location host/port on (201/301/302/307/308) redirects based on requested host/port. Default: false.

  • protocolRewrite: rewrites the location protocol on (201/301/302/307/308) redirects to 'http' or 'https'. Default: null.

  • cookieDomainRewrite: rewrites domain of¬†set-cookie¬†headers. Possible values:

    • false¬†(default): disable cookie rewriting

    • String: new domain, for example¬†cookieDomainRewrite: "new.domain". To remove the domain, use¬†cookieDomainRewrite: "".

    • Object: mapping of domains to new domains, use¬†"*"¬†to match all domains. For example keep one domain unchanged, rewrite one domain and remove other domains:

cookieDomainRewrite: {
  "unchanged.domain": "unchanged.domain",
  "old.domain": "new.domain",
  "*": ""
}
  • cookiePathRewrite: rewrites path of¬†set-cookie¬†headers. Possible values:

    • false¬†(default): disable cookie rewriting

    • String: new path, for example¬†cookiePathRewrite: "/newPath/". To remove the path, use¬†cookiePathRewrite: "". To set path to root use¬†cookiePathRewrite: "/".

    • Object: mapping of paths to new paths, use¬†"*"¬†to match all paths. For example, to keep one path unchanged, rewrite one path and remove other paths:

cookiePathRewrite: {
  "/unchanged.path/": "/unchanged.path/",
  "/old.path/": "/new.path/",
  "*": ""
}
  • headers: object with extra headers to be added to target requests.

  • proxyTimeout: timeout (in milliseconds) for outgoing proxy requests

  • timeout: timeout (in milliseconds) for incoming requests

  • followRedirects: true/false, Default: false - specify whether you want to follow redirects

  • selfHandleResponse¬†true/false, if set to true, none of the webOutgoing passes are called and it's your responsibility to appropriately return the response by listening and acting on the¬†proxyRes¬†event

  • buffer: stream of data to send as the request body. Maybe you have some middleware that consumes the request stream before proxying it on e.g. If you read the body of a request into a field called 'req.rawbody' you could restream this field in the buffer option:

'use strict';

const streamify = require('stream-array');
const HttpProxy = require('http-proxy');
const proxy = new HttpProxy();

module.exports = (req, res, next) => {

  proxy.web(req, res, {
    target: 'http://localhost:4003/',
    buffer: streamify(req.rawBody)
  }, next);

};