Skip to content

Instantly share code, notes, and snippets.

@xola139
Created February 19, 2018 19:17
Show Gist options
  • Star 67 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save xola139/906cff7d4c2460e6de1dd6998386a0d8 to your computer and use it in GitHub Desktop.
Save xola139/906cff7d4c2460e6de1dd6998386a0d8 to your computer and use it in GitHub Desktop.
When Invalid Host Header when ngrok tries to connect to Angular or React dev server
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
@AnalyzePlatypus
Copy link

This also solves the same issue with the Vue dev server.
Kudos!

@venkateshwarv
Copy link

Works for webpack devserver as well

@logesh45
Copy link

logesh45 commented Nov 2, 2018

Works with react express app.

@rogerex
Copy link

rogerex commented May 31, 2019

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

@ianhernandez
Copy link

Thanks friend

@wfrsilva
Copy link

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

Works to my Angular project, thanks @rogerex

@khashaba
Copy link

Worked for my angular Project
thanks

@dannyOhNo
Copy link

My hero

@PhilippMeissner
Copy link

Not all heroes wear capes 👍

@millerdrew
Copy link

Big thanks

@Sheldonfrith
Copy link

Thank you

@liquidvisual
Copy link

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

@gigliozzi
Copy link

Very good, Tks 👍

@devashreeh
Copy link

This worked for me thanks!

@dansterrett
Copy link

Thanks!

@navid-farjad
Copy link

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

@victorE23
Copy link

it worked like a charm!!

@therajaryan
Copy link

Thanks man, worked for Vue as well.

@luiarhs
Copy link

luiarhs commented May 18, 2022

Kudos! 💪

@syahirudean
Copy link

Works well for Angular 13 SSR 👍

@tapanis517
Copy link

Worked with Vue too ...Thanks 🙏👍

@seremwen
Copy link

ngrok http --host-header=rewrite 4200

this one worked on my Angular app

@BrayansStivens
Copy link

ngrok http --host-header=rewrite 4200

this one worked on my Angular app

TY!

@unkn0wncvm1
Copy link

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

@blackbomb404
Copy link

blackbomb404 commented Oct 31, 2022

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

Is it a bad approach?

@tuliren
Copy link

tuliren commented Nov 17, 2022

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>

@OleksiiB5021
Copy link

It crashes ngrok on my end

@electr0sheep
Copy link

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}}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment