Invalid Host Header when ngrok tries to connect to React dev server

Question

I'm trying to test my React application on a mobile device. I'm using ngrok to make my local server available to other devices and have gotten this working with a variety of other applications. However, when I try to connect ngrok to the React dev server, I get the error:

Invalid Host Header

I believe that React blocks all requests from another source by default. Any thoughts?

score 967 · Accepted Answer · edited Jul 29 '22 at 07:21

967

I'm encountering a similar issue and found two solutions that work as far as viewing the application directly in a browser

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

obviously, replace 8080 with whatever port you're running on

this solution still raises an error when I use this in an embedded page, that pulls the bundle.js from the react app. I think since it rewrites the header to localhost when this is embedded, it's looking to localhost, which the app is no longer running on

edited Jul 29 '22 at 07:21

Suraj Rao

29,388
11
94
103

answered Aug 03 '17 at 21:14

textual

9,872
2
17
10

35

the first one was enough – Sudhir Jun 06 '18 at 05:15
1

In case someone else runs into this problem: This works, but it seems to mess up cookies, meaning it breaks login mechanisms and such! – pdowling Aug 10 '18 at 18:47
This problem was also for Angular 6, and it works, thanks – Druta Ruslan Nov 20 '18 at 11:53
2

The `-host-header` should come before the port number, so the first example should be `ngrok http -host-header="localhost:8080" 8080` – Sean the Bean Jun 14 '19 at 18:20
2

./ngrok http --host-header=rewrite 8080 – sreejith v s Aug 26 '19 at 16:26
1

@pdowling I'm having this issue. Is there a way to not break the login functionality? I'm currently try to build login/logout functionality to facebook with my app and it works sometimes but not all, and I don't know if it's my code or ngrok https://stackoverflow.com/questions/59522085/facebook-sdk-login-logout-ngrok – adam.k Dec 29 '19 at 18:53
@adam.k does using the https version of the forwarding URL solves the problem? – Andrew Lam Nov 25 '20 at 01:46
you deserve a beer :) – p7adams Feb 09 '22 at 13:03
FYI, you can achieve the same thing using Cloudflare Tunnels (a free ngrok alternative) via this command `cloudflared tunnel --url http://localhost:8080 --http-host-header localhost:8080`. More details: [Cloudflare Quick Tunnels](https://gist.github.com/randyburden/cbda4da88bc4e6cd9e17d59ecf03dcf9) – Randy Burden Jul 27 '22 at 20:56
The first one worked for me as well, with a local Angular application listening on port 4200 – Eddie Mar 16 '23 at 02:01

score 38 · Answer 2 · answered May 26 '20 at 14:23

38

Option 1

If you do not need to use Authentication you can add configs to ngrok commands

ngrok http 9000 --host-header=rewrite

or

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

But in this case Authentication will not work on your website because ngrok rewriting headers and session is not valid for your ngrok domain

Option 2

If you are using webpack you can add the following configuration

devServer: {
    disableHostCheck: true
}

In that case Authentication header will be valid for your ngrok domain

answered May 26 '20 at 14:23

Peter Gyschuk

919
8
12

1

Note that in Webpack 5, `disableHostCheck` no longer seems to exist as a valid key for `devServer`. Instead you should use [`allowedHosts`](https://webpack.js.org/configuration/dev-server/#devserverallowedhosts): `allowedHosts: ['your.hostname.com']`, or more dangerously `allowedHosts: 'all'` – tryforceful Oct 19 '22 at 09:22

score 20 · Answer 3 · edited Mar 02 '22 at 15:14

20

Don't know why but tried everything and it didn't work for me. What finally worked for me is this: ngrok http https://localhost:4200 -host-header="localhost:4200"

it might be useful for someone

edited Mar 02 '22 at 15:14

Toni Michel Caubet

19,333
56
202
378

answered Sep 01 '21 at 15:50

DevJoe

263
2
9

2

i needed double dash in --host `ngrok http https://localhost:4200 --host-header="localhost:4200"` – t q Oct 20 '22 at 01:24

score 7 · Answer 4 · answered Aug 20 '20 at 03:34

If you use webpack devServer the simplest way is to set disableHostCheck, check webpack doc like this

devServer: {
    contentBase: path.join(__dirname, './dist'),
    compress: true,
    host: 'localhost',
    // host: '0.0.0.0',
    port: 8080,
    disableHostCheck: true //for ngrok
},

score 2 · Answer 5 · answered Dec 02 '18 at 18:29

I used this set up in a react app that works. I created a config file named configstrp.js that contains the following:

module.exports = {
ngrok: {
// use the local frontend port to connect
enabled: process.env.NODE_ENV !== 'production',
port: process.env.PORT || 3000,
subdomain: process.env.NGROK_SUBDOMAIN,
authtoken: process.env.NGROK_AUTHTOKEN
},   }

Require the file in the server.

const configstrp      = require('./config/configstrp.js');
const ngrok = configstrp.ngrok.enabled ? require('ngrok') : null;

and connect as such

if (ngrok) {
console.log('If nGronk')
ngrok.connect(
    {
    addr: configstrp.ngrok.port,
    subdomain: configstrp.ngrok.subdomain,
    authtoken: configstrp.ngrok.authtoken,
    host_header:3000
  },
  (err, url) => {
    if (err) {

    } else {

    }
   }
  );
 }

Do not pass a subdomain if you do not have a custom domain

score 1 · Answer 6 · answered Jul 18 '22 at 03:22

1

Windows, ngrok v3

ngrok http <url> --host-header=<host>:<port>

answered Jul 18 '22 at 03:22

sergredov

11
1

score 0 · Answer 7 · answered Feb 24 '23 at 05:41

I am attaching a error image which i was facing but after a google and documentation search, i found the exact solution.

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

NOTE : I was working on angular that's why I used 4200 port, but you can select a port as per your requirement.

#angular #ngrok #localhost

Invalid Host Header when ngrok tries to connect to React dev server

7 Answers7

Windows, ngrok v3

Linked