Vite proxy - how to setup in 2023

Vite proxy - how to setupVite 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);

};

Stay up to date

Get notified when I publish New Games or articles, and unsubscribe at any time.

Thanks for joining!

FAQs

What is Vite?

Vite is a build tool that allows you to develop your frontend applications using modern JavaScript frameworks such as React, Vue, and others.

What is a Vite proxy?

Vite proxy is a server that sits between the client and the target server, forwarding client requests to the target server and returning its responses to the client.

Why use a proxy in Vite?

A proxy is useful when you want to access resources that are not available on the same origin as your application, such as an API on a different domain.

How do you set up a proxy in Vite?

To set up a proxy in Vite, add a 'proxy' option to the 'server' object in the Vite configuration file.

What is the 'target' option in the Vite proxy configuration?

The 'target' option specifies the URL of the target server that the proxy should forward requests to.

What is the 'changeOrigin' option in the Vite proxy configuration?

The 'changeOrigin' option allows the target server to see the original host header from the client, which is important for some APIs that require it.

Can you use regular expressions to match URLs in the Vite proxy configuration?

Yes, you can use regular expressions to match URLs in the proxy configuration.

Can you configure the Vite proxy to rewrite URLs?

Yes, you can configure the proxy to rewrite URLs using the 'rewrite' option in the proxy configuration.

What is Vite proxy and why would I need it?

Vite proxy is a feature of the Vite dev server that allows you to specify a proxy target for API requests. It’s useful when developing a frontend application that needs to connect to a backend API running on a different server or port.

How do I set up Vite proxy?

To set up Vite proxy, you need to add a “proxy” field to your Vite config file (vite.config.js) with the target URL of your API. For example: export default { proxy: ‘http://localhost:3000’ }

Can I specify a path for my API requests?

Yes, you can specify a path for your API requests by including it in the “proxy” URL. For example: export default { proxy: ‘http://localhost:3000/api’ }

Can I use Vite plugins with Vite proxy?

Yes, Vite plugins can still be used with Vite proxy. However, you may need to configure your plugins to work with the proxy target URL. Consult the documentation of your plugin for more information.

How can I access my dev server from other devices on my network?

To access your dev server from other devices on your network, you can use the IP address of the computer running the server. For example, if your dev server is running on a computer with IP address 192.168.1.100, you can access it from another device on the network by visiting http://192.168.1.100:port, where “port” is the port number of your dev server.

Can I run my Vite project in production?

Yes, Vite is capable of building your application for production. You can use the npm run build command to create a production-ready build of your project.

Can I develop multiple pages or applications with Vite?

Yes, Vite supports developing multiple pages or applications using its build.rollupOptions.input configuration option. This allows you to specify multiple entry points for your project.

How does Vite improve development workflow?

Vite improves the development workflow by leveraging modern browser features, such as module-based imports and code splitting. This enables faster build and reload times, making the development process more efficient.

Can I deploy my Vite project to a server?

Yes, you can deploy your Vite project to a server like any other web application. You can use the production build generated by Vite or set up a deployment pipeline to automatically build and deploy your application.

What if I encounter an error while using Vite?

If you encounter an error while using Vite, consult the Vite documentation or search for solutions online. You can also try asking for help in the Vite community, which includes a Discord server and GitHub repository.

How does Vite Proxy approach asset loading and bundling?

Vite Proxy follows an approach where every asset is loaded independently through a server running in the background. This makes it a lot faster and snappier, even for projects that have large asset files.

What challenge does Vite Proxy solve?

Vite Proxy solves the challenge of slow and unresponsive asset loading, especially for projects that have a lot of assets or UI components that require a lot of dependencies to load. With Vite Proxy, asset loading and bundling are both extremely fast and simple.

How can I set up Vite Proxy?

To set up Vite Proxy, follow these steps:

  • Install the latest version of the Vite plugin.
  • Create a project folder and link it to Vite.
  • Set up a local entry point for your app.
  • Add the script tag for the Vite app to your production page.
  • Run the development server.

Can I use Vite Proxy with a SPA in the context of a larger project?

Yes, Vite Proxy can be used with a SPA in the context of a larger project, and it will help to make asset loading faster and more efficient.

What is the feedback on using Vite Proxy?

Feedback on using Vite Proxy has been overwhelmingly positive, with users praising the tool for its speed and simplicity, and for making asset loading and bundling much easier and more efficient.

What are the benefits of using Vite Proxy?

Some of the benefits of using Vite Proxy include faster asset loading and bundling, simpler setup and configuration, more efficient use of server resources, and a more snappy and interactive UI experience.

Can I serve my production page using Vite Proxy?

Yes, Vite Proxy can be used to serve your production page, and it will help to make the page load faster and more efficiently.

Can I use Vite Proxy to load assets locally?

Yes, Vite Proxy can be used to load assets locally, which can help to make development and testing faster and more efficient.

Is there any challenge that exists when using Vite Proxy?

While Vite Proxy is generally a helpful and reliable tool, there may be some challenges that arise when using it, particularly with more complex projects or configurations. However, these challenges can typically be resolved with some troubleshooting and experimentation.

Related articles

Ruslan Osipov
Author: Ruslan Osipov