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

logesh45 commented Nov 2, 2018

Works with react express app.

@rogerex
Copy link
Copy Markdown

rogerex commented May 31, 2019

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

luiarhs commented May 18, 2022

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

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

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