Skip to content

Instantly share code, notes, and snippets.

@xola139
Created February 19, 2018 19:17
Show Gist options
  • Select an option

  • Save xola139/906cff7d4c2460e6de1dd6998386a0d8 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

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

@venkateshwarv

Copy link
Copy Markdown

Works for webpack devserver as well

@logesh45

logesh45 commented Nov 2, 2018

Copy link
Copy Markdown

Works with react express app.

@rogerex

rogerex commented May 31, 2019

Copy link
Copy Markdown

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

@ianhernandez

Copy link
Copy Markdown

Thanks friend

@wfrsilva

Copy link
Copy Markdown

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

Works to my Angular project, thanks @rogerex

@khashaba

Copy link
Copy Markdown

Worked for my angular Project
thanks

@baldwindc

Copy link
Copy Markdown

My hero

@PhilippMeissner

Copy link
Copy Markdown

Not all heroes wear capes 👍

@millerdrew

Copy link
Copy Markdown

Big thanks

@Sheldonfrith

Copy link
Copy Markdown

Thank you

@liquidvisual

Copy link
Copy Markdown

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

@gigliozzi

Copy link
Copy Markdown

Very good, Tks 👍

@devashreeh

Copy link
Copy Markdown

This worked for me thanks!

@dansterrett

Copy link
Copy Markdown

Thanks!

@navid-farjad

Copy link
Copy Markdown

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
Copy Markdown

it worked like a charm!!

@therajaryan

Copy link
Copy Markdown

Thanks man, worked for Vue as well.

@luiarhs

luiarhs commented May 18, 2022

Copy link
Copy Markdown

Kudos! 💪

@syahirudean

Copy link
Copy Markdown

Works well for Angular 13 SSR 👍

@tapanis517

Copy link
Copy Markdown

Worked with Vue too ...Thanks 🙏👍

@seremwen

Copy link
Copy Markdown

ngrok http --host-header=rewrite 4200

this one worked on my Angular app

@BrayansStivens

Copy link
Copy Markdown

ngrok http --host-header=rewrite 4200

this one worked on my Angular app

TY!

@00unkn0wn00

Copy link
Copy Markdown

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

blackbomb404 commented Oct 31, 2022

Copy link
Copy Markdown

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

Is it a bad approach?

@tuliren

tuliren commented Nov 17, 2022

Copy link
Copy Markdown

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
Copy Markdown

It crashes ngrok on my end

@electr0sheep

Copy link
Copy Markdown

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