341

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?

7 Answers 7

932

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

10
  • 33
    the first one was enough
    – Sudhir
    Jun 6, 2018 at 5: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, 2018 at 18:47
  • 2
    The -host-header should come before the port number, so the first example should be ngrok http -host-header="localhost:8080" 8080 Jun 14, 2019 at 18:20
  • 2
    ./ngrok http --host-header=rewrite 8080 Aug 26, 2019 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 stackoverflow.com/questions/59522085/…
    – adam.k
    Dec 29, 2019 at 18:53
35

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

1
  • 1
    Note that in Webpack 5, disableHostCheck no longer seems to exist as a valid key for devServer. Instead you should use allowedHosts: allowedHosts: ['your.hostname.com'], or more dangerously allowedHosts: 'all' Oct 19, 2022 at 9:22
18

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

1
  • 1
    i needed double dash in --host ngrok http https://localhost:4200 --host-header="localhost:4200"
    – t q
    Oct 20, 2022 at 1:24
7

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

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

1

Windows, ngrok v3

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

enter image description here

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.