Skip to content

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

Closed
@mariusa

Description

@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

Activity

ashubham

ashubham commented on Jun 30, 2020

@ashubham
Contributor

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

mariusa commented on Jun 30, 2020

@mariusa
Author

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

yyx990803 commented on Jul 2, 2020

@yyx990803
Member

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

added a commit that references this issue on Jul 2, 2020
541b8d7
williamyorkl

williamyorkl commented on Jul 9, 2021

@williamyorkl

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

williamyorkl

williamyorkl commented on Jul 9, 2021

@williamyorkl

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

locked and limited conversation to collaborators on Jul 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @yyx990803@mariusa@ashubham@williamyorkl

        Issue actions

          when using --https, proxy gives TypeError [ERR_INVALID_HTTP_TOKEN]: Header name must be a valid HTTP token [":path"] · Issue #484 · vitejs/vite