CODEWITHSUNDEEP
reactjslocalhostngrok
Patrick Connors
Patrick Connors

Reputation: 6095

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

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?

Upvotes: 382

Views: 261583

Answers (8)

facebook-100008353775354
facebook-100008353775354

Reputation: 11

this worked for me when want to redirect https

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

Upvotes: 0

DevJoe
DevJoe

Reputation: 343

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

Upvotes: 27

Nagender Pratap Chauhan
Nagender Pratap Chauhan

Reputation: 2224

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

Upvotes: 1

textual
textual

Reputation: 10522

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

Upvotes: 1032

sergredov
sergredov

Reputation: 31

Windows, ngrok v3

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

Upvotes: 2

Qiulang
Qiulang

Reputation: 12505

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

Upvotes: 7

Peter Gyschuk
Peter Gyschuk

Reputation: 1029

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

Upvotes: 46

FlyingSnowGhost
FlyingSnowGhost

Reputation: 187

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

Upvotes: 2

Related Questions