vite-plugin-proxy-middleware

1.0.2 verified Mon Apr 27 auth: no javascript

A Vite plugin that resolves the conflict between using HTTP/2 (h2) and Vite's built-in proxy. When HTTPS is enabled for HTTP/2, Vite's proxy configuration becomes incompatible. This plugin provides a separate proxy table configuration via a file path or object, enabling both HTTP/2 and proxy to work simultaneously. v1.0.2 is stable. Requires Vite with HTTPS enabled. Alternative to manually working around the conflict.

Common errors

error Error: The 'proxyTable' option is required. ↓

cause Missing proxyTable option in plugin configuration.

fix

Add proxyTable: { ... } or proxyTable: './path/to/proxy-table' to VitePluginProxyMiddleware options.

error Error: Cannot find module './proxy-table' ↓

cause When proxyTable is a file path, the file does not exist or is not accessible.

fix

Ensure the proxy table file exists at the specified path and exports an object.

Warnings

gotcha Vite's built-in proxy must be disabled (do not set server.proxy) when using this plugin. ↓

fix Remove server.proxy from vite.config; use plugin's proxyTable instead.

gotcha HTTPS must be enabled for HTTP/2 to work; plugin requires server.https configuration. ↓

fix Generate SSL certificates and set server.https in vite.config.

gotcha proxyTable option can be a path string (e.g., './proxy-table') but the file must export an object with environment keys (dev, test, gray, prod). ↓

fix Ensure proxy-table.js/ts exports an object like { dev: { ... }, prod: { ... } }.

gotcha The plugin uses http-proxy-middleware internally, but with a slightly different API; rewrite function must be defined on each rule. ↓

fix Include rewrite in proxy rule: { target: '...', rewrite: (path) => path.replace(/^\/api/, '') }

Install

npm install vite-plugin-proxy-middleware

yarn add vite-plugin-proxy-middleware

pnpm add vite-plugin-proxy-middleware

Imports

default

wrong

const VitePluginProxyMiddleware = require('vite-plugin-proxy-middleware')

correct

import VitePluginProxyMiddleware from 'vite-plugin-proxy-middleware'

ESM default export. CommonJS require not supported.

VitePluginProxyMiddleware

wrong

import { VitePluginProxyMiddleware } from 'vite-plugin-proxy-middleware'

correct

import VitePluginProxyMiddleware from 'vite-plugin-proxy-middleware'

Not a named export; use default import.

Quickstart

Shows basic configuration with proxy table object, HTTPS setup for HTTP/2, and note to avoid Vite's native proxy option.

// vite.config.ts
import { defineConfig } from 'vite'
import VitePluginProxyMiddleware from 'vite-plugin-proxy-middleware'

export default defineConfig({
  plugins: [
    VitePluginProxyMiddleware({
      proxyTable: {
        '/api': {
          target: 'https://api.example.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
      mockPath: '/dev-mock'
    })
  ],
  server: {
    https: {
      key: './localhost-key.pem',
      cert: './localhost.pem'
    }
    // Do NOT use Vite's proxy here
  }
})