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-cookieheaders. Possible values:false(default): disable cookie rewritingString: new domain, for example
cookieDomainRewrite: "new.domain". To remove the domain, usecookieDomainRewrite: "".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-cookieheaders. Possible values:false(default): disable cookie rewritingString: new path, for example
cookiePathRewrite: "/newPath/". To remove the path, usecookiePathRewrite: "". To set path to root usecookiePathRewrite: "/".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
proxyReseventbuffer: 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);
};
