Vite proxy - how to setup in 2024

• Vite proxy - How to set up
• Vite proxy Options
• Vite change port

#Vite proxy - How to set up

To set up Vite proxy you have to add a proxy option to the server object in the Vite configuration file (vite.config.js). The proxy option allows you to redirect HTTP requests to a different server, which can be useful in a number of scenarios, such as when you need to access data from an API that is hosted on a different domain.

Here is an example of how to set up a proxy in Vite:

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.

#Vite proxy 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);

};

#Vite change port

To change the port in Vite, you can set the port option in your vite.config.js file. For example, to change the port to 5000, you would add the following line to your config file:

server: {
  port: 5000,
},

You can also pass the port option as a CLI argument when you start Vite. For example, to start Vite on port 8000, you would run the following command:

vite --port 8000

The default port for Vite is 3000.