when using --https, proxy gives TypeError [ERR_INVALID_HTTP_TOKEN]: Header name must be a valid HTTP token [":path"]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

package.json

 "scripts": {
    "dev": "vite --https",
    "build": "vite build"
  },

vite.config.js

module.exports = {
  proxy: {
    '/api': {
      target: 'http://localhost:5000',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '/admin/api/')
    }
  }
}

Accessing https://localhost:3000/api/test gives

  TypeError [ERR_INVALID_HTTP_TOKEN]: Header name must be a valid HTTP token [":path"]
      at ClientRequest.setHeader (_http_outgoing.js:528:3)
      at new ClientRequest (_http_client.js:241:14)
      at Object.request (http.js:46:10)
      at Array.stream (/home/marius/work/v3/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:126:74)
      at ProxyServer.<anonymous> (/home/marius/work/v3/node_modules/http-proxy/lib/http-proxy/index.js:81:21)
      at /home/marius/work/v3/node_modules/koa-proxies/index.js:73:11
      at new Promise (<anonymous>)
      at /home/marius/work/v3/node_modules/koa-proxies/index.js:46:10
      at dispatch (/home/marius/work/v3/node_modules/koa-compose/index.js:42:32)
      at /home/marius/work/v3/node_modules/vite/dist/node/server/serverPluginModuleResolve.js:25:20

If --https is removed, then the proxy works. Note that the proxy is to http, guess it’s not an issue (works fine with vue-cli vue.config.js)

Reproduction

Please provide a link to a repo that can reproduce the problem you ran into. Hope it’s not needed? It requires a node server running on http://localhost:5000

System Info

• required vite version: vite v1.0.0-beta.8
• required Operating System: linux fedora
• required Node version: v12.16.1

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

vite v1.0.0-beta.8
  vite:config env mode: development +0ms
  vite:config env: {} +2ms
  vite:config config resolved in 4ms +1ms
  vite:resolve (node_module entry) vue -> dist/vue.runtime.esm-bundler.js +0ms
  vite:optimize optimizing vue (imports sub dependencies) +0ms
[vite] Optimizable dependencies detected:
vue
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies have changed)

  Dev server running at:
  > Local:    https://localhost:3000/
  > Network:  https://192.168.100.4:3000/

  vite:server server ready in 1930ms. +0ms
  vite:proxy GET /api/monitor proxy to -> http://localhost:5000/admin/api//monitor +0ms

  TypeError [ERR_INVALID_HTTP_TOKEN]: Header name must be a valid HTTP token [":path"]
      at ClientRequest.setHeader (_http_outgoing.js:528:3)
      at new ClientRequest (_http_client.js:241:14)
      at Object.request (http.js:46:10)
      at Array.stream (/home/marius/work/v3/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:126:74)
      at ProxyServer.<anonymous> (/home/marius/work/v3/node_modules/http-proxy/lib/http-proxy/index.js:81:21)
      at /home/marius/work/v3/node_modules/koa-proxies/index.js:73:11
      at new Promise (<anonymous>)
      at /home/marius/work/v3/node_modules/koa-proxies/index.js:46:10
      at dispatch (/home/marius/work/v3/node_modules/koa-compose/index.js:42:32)
      at /home/marius/work/v3/node_modules/vite/dist/node/server/serverPluginModuleResolve.js:25:20

  vite:rewrite (skipped) /favicon.ico +0ms

[williamyorkl]

seems that this module would work ? @mariusa https://www.npmjs.com/package/http2-proxy

[ashubham]

http-proxy (The underlying module which vite uses for proxy) does not support http2. You cannot use https with proxy as vite is now using Http2. There are 2 solutions:

1. Do not use https (workaround)
2. We need to update ViteJS to use a http proxy module which supports http2 proxying.
3. Change ViteJS to automatically fallback to http1.1 if used with Proxy/Https. (This is what snowpack does).