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

[mariusa]

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

[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).

[mariusa]

Thanks,

Would prefer to avoid 1. in order to catch issues with https that might reach production, eg a non-secure resource which will be blocked by browser when using https.
An edge case with 1. is Shopify apps, which Shopify forces to be loaded in an iframe, which must be https. One wouldn't be able to develop at all in this particular case.

[yyx990803]

@ashubham I think option 3 seems most straightforward for now. Open to a PR.

[williamyorkl]

Is it possible to use http2 in http mode only, not https ?

[williamyorkl]

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