When Invalid Host Header when ngrok tries to connect to Angular or React dev server

Invalid Host Header NGROK

When Invalid Host Header when ngrok tries to connect to Angular or React dev server use this form for run ngrok.

ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080

Very good, Tks 👍

This worked for me thanks!

Thanks!

iam getting ERR_NGROK_802 ! by ngrok http 8080 -host-header="localhost:8080"

ngrok http 8080 -host-header="localhost:8080" this works for ng app using MSAL too

it worked like a charm!!

Thanks man, worked for Vue as well.

Kudos! 💪

Works well for Angular 13 SSR 👍

Worked with Vue too ...Thanks 🙏👍

ngrok http --host-header=rewrite 4200

this one worked on my Angular app

ngrok http --host-header=rewrite 4200

this one worked on my Angular app

TY!

i get this polyfills.js:5503 WebSocket connection to '**censored**' failed: WebSocketClient @ polyfills.js:5503 polyfills.js:6504 [webpack-dev-server] Event logger @ polyfills.js:6504 polyfills.js:6494 [webpack-dev-server] Trying to reconnect..
it is on a loop

All i do is (on Angular side) ng serve --disable-host-check

Is it a bad approach?

Does anyone know how to get this working with a custom URL?

@liquidvisual, it's probably irrelevant now. But I got ngrok working for a custom URL with the following config:

authtoken: <token>
version: 2
region: us
tunnels:
  <tunnel-name>:
    addr: https://mydomain.com
    host_header: mydomain.com
    proto: http
    hostname: <ngrok-host>

It crashes ngrok on my end

Thanks for this, it fixed my issue.

There was a question about how to do this with a custom URL.
ngrok http --subdomain {{subdomain}} --host-header=rewrite {{port}}