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

The best answers to the question “Invalid Host Header when ngrok tries to connect to React dev server” in the category Dev.

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?

ANSWER:

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

ANSWER:

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

ANSWER:

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

ANSWER:

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