vite-plugin-http2-proxy
Run an HTTP2 proxy in development mode with Vite. Works great when paired with vite-plugin-mkcert.
Why would I use this?
When using Vite's built-in proxy and https: true
, all requests are downgraded to HTTP1.1. See this issue for discussion. This plugin is useful when you need to proxy requests to an external API in development mode and you want to use https and/or HTTP2.
Use this with vite-plugin-mkcert for seamless SSL certificate generation and use of https with proxy usage in development.
Install
npm
Using npm install @cpsoinos/vite-plugin-http2-proxy --save-dev
yarn
Using yarn add @cpsoinos/vite-plugin-http2-proxy -D
pnpm
Using pnpm add @cpsoinos/vite-plugin-http2-proxy -D
Usage
// vite.config.ts
import { defineConfig } from 'vite'
import http2Proxy from '@cpsoinos/vite-plugin-http2-proxy'
import mkcert from 'vite-plugin-mkcert' // optional - use to generate SSL certificates and use https in development
export default defineConfig(({ mode }) => {
return {
plugins: [
// ... other plugins
mkcert(), // optional
http2Proxy({ quiet: true }), // optional -- suppress error logging
],
server: {
// optional - only in development mode
...(mode === 'development' && {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''), // optional - remove `/api` from request path
},
},
}),
},
}
})
Accreditations
Adapted from a gist shared by @xfournet in this issue comment.
This plugin uses http2-proxy
under the hood. See the http2-proxy package for more information.
Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2024 Corey Psoinos.
This project is MIT licensed.