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

后端 未结 4 1888
走了就别回头了
走了就别回头了 2021-01-29 17:04

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 o

相关标签:
4条回答
  • 2021-01-29 17:42

    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

    0 讨论(0)
  • 2021-01-29 17:52

    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

    0 讨论(0)
  • 2021-01-29 18:00

    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

    0 讨论(0)
  • 2021-01-29 18:01

    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
    },
    
    0 讨论(0)
提交回复
热议问题