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

ID : 10201

viewed : 167

Tags : reactjslocalhostngrokreactjs

Top 5 Answer for reactjs - Invalid Host Header when ngrok tries to connect to React dev server

vote vote

94

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

vote vote

90

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

vote vote

71

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

vote vote

64

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

59

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

Top 3 video Explaining reactjs - Invalid Host Header when ngrok tries to connect to React dev server

Related QUESTION?