Vite support for HTTP2 and proxy

pluginHttp2Proxy.ts

import proxy from 'http2-proxy';
import type { Plugin, ProxyOptions } from 'vite';

export const pluginHttp2Proxy = (): Plugin => {
  let routes: Record<string, string | ProxyOptions>;
  return {
    name: 'vite-plugin-http2-proxy',
    config: (config) => {
      const { server } = config;
      routes = server?.proxy ?? {};
      if (server) {
        server.proxy = undefined;
      }
      return config;
    },
    configureServer: ({ config: { logger }, middlewares }) => {
      Object.entries(routes).forEach(([route, target]) => {
        if (typeof target !== 'string') {
          throw new Error('ProxyOptions target are not supported yet, only string target are currently supported');
        }

        const { protocol, hostname, port } = new URL(target);
        const options = {
          protocol: protocol as 'http' | 'https',
          hostname,
          port: Number(port),
          proxyTimeout: 60000,
        };

        middlewares.use(route, (req, res) => {
          proxy.web(req, res, { ...options, path: req.originalUrl }, (err) => {
            if (err) {
              logger.error(`[http2-proxy] Error when proxying request on '${req.originalUrl}'`, { timestamp: true, error: err });
            }
          });
        });
      });
    },
  };
};

Tested with Vite 5 (should probably work with Vite 4 too ?)
ProxyOptions not implemented.

Configure the Vite proxy as usual and just add the plugin in the vite configuration eg:

export default defineConfig({
  plugins: [
    ....
    pluginHttp2Proxy(),
  ],
  ....
  server: {
    ....
    proxy: {
      '/api': 'https://localhost:8080/api',
    },
  },
});

Thank you for this! ❤️

Thank you for this! ❤️

i get :
error when starting dev server:
Error: Not supported yet
/vite.config.js.timestamp-1712238134948-ef04cf446917a.mjs:114:17
at Array.forEach ()
with:
"http2-proxy": "^5.0.53",
"vite": "^5.2.0"

@A2E9 yes, ProxyOptions are not implemented. Can you share your proxy config ?

@A2E9 yes, ProxyOptions are not implemented. Can you share your proxy config ?

here is my proxy config:

'/123': { target: '/456', secure: false, rewrite: (e) => e.replace(/\/123/, '/'), configure: (proxy) => proxy.on('proxyReq', (proxyReq) => { proxyReq.setHeader('Cookie', proxyReq.getHeader('auth') || ''); }), },

Here is my version with rewrite and configure support.
Note that you should update your proxy config in configure() sections

proxy.on('proxyRes', (proxyRes) => {...} => proxy.onRes = async (req, res, proxyRes) => {...}

import type { Http2ServerRequest } from 'http2';
import type { Plugin, ProxyOptions } from 'vite';
import http2Proxy, { type http2WebOptions as Http2WebOptions } from 'http2-proxy';

const getOptions = (proxyOptions: string | ProxyOptions) => {
    if (typeof proxyOptions !== 'string') {
        const { protocol, hostname, port } = new URL(proxyOptions.target);
        const { proxyTimeout } = proxyOptions;

        return {
            protocol: protocol as 'https',
            hostname,
            port: Number(port),
            proxyTimeout,
            rejectUnauthorized: false,
        };
    }
    const { protocol, hostname, port } = new URL(proxyOptions);

    return {
        protocol: protocol as 'https',
        hostname,
        port: Number(port),
        proxyTimeout: 60000,
        rejectUnauthorized: false,
    };
};

export default (): Plugin => {
    let routes: Record<string, string | ProxyOptions>;

    return {
        name: 'vite-plugin-http2-proxy',
        config: (config) => {
            const { server } = config;
            routes = server?.proxy ?? {};

            if (server) {
                server.proxy = undefined;
            }

            return config;
        },
        configureServer: ({ config: { logger }, middlewares }) => {
            Object.entries(routes).forEach(([route, proxyOptions]) => {
                const options = getOptions(proxyOptions);
                middlewares.use(route, (req, res) => {
                    const http2Options: Http2WebOptions = { ...options };

                    if (typeof proxyOptions !== 'string') {
                        if (proxyOptions.rewrite) {
                            http2Options.path = proxyOptions.rewrite(req.originalUrl);
                        } else {
                            http2Options.path = req.originalUrl;
                        }

                        if (proxyOptions.configure) {
                            proxyOptions.configure(http2Options, proxyOptions);
                        }
                    }

                    http2Proxy.web(req as Http2ServerRequest, res, http2Options, (err) => {
                        if (err) {
                            logger.error(`[http2-proxy] Error when proxying request on '${req.originalUrl}'`, {
                                timestamp: true,
                                error: err,
                            });
                        }
                    });
                });
            });
        },
    };
};

@c1aphas I didn’t quite understand what configure should look like...

[vite] Internal server error: proxy.on is not a function

@nik-prostok

configure(proxy) {
  // before
  // proxy.on('proxyRes', (proxyRes) => {...} 

  // now
  proxy.onRes = async (req, res, proxyRes) => {...}
}

Here is my version with rewrite and configure support. Note that you should update your proxy config in configure() sections

proxy.on('proxyRes', (proxyRes) => {...} => proxy.onRes = async (req, res, proxyRes) => {...}

import type { Http2ServerRequest } from 'http2';
import type { Plugin, ProxyOptions } from 'vite';
import http2Proxy, { type http2WebOptions as Http2WebOptions } from 'http2-proxy';
....

This doesn't seem to work well with graphql subscriptions (stream types). Any insight as to why?

^ Are there any error messages or strange behaviours that you've noticed?

^ Are there any error messages or strange behaviours that you've noticed?

Hi Seb,

It says "proxy timeout". I tried to increase the timeout limit with no success. We are using server-side events, so its an http stream call that is open for a long time. It only does this on our http streams.

Appreciate the help!