Encabezado de host no válido cuando ngrok intenta conectarse al servidor de desarrollo React

Estoy tratando de probar mi aplicación React en un dispositivo móvil. Estoy usando ngrok para que mi servidor local esté disponible para otros dispositivos y he conseguido que funcione con una variedad de otras aplicaciones. Sin embargo, cuando intento conectar ngrok al servidor de desarrollo React, aparece el error:

Invalid Host Header 

Creo que React bloquea todas las solicitudes de otra fuente por defecto. ¿Alguna idea?

Me encuentro con un problema similar y encontré dos soluciones que funcionan tan lejos como ver la aplicación directamente en un navegador

ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080

obviamente, reemplace 8080 con cualquier puerto en el que esté ejecutando

esta solución aún genera un error cuando lo uso en una página incrustada, que extrae el bundle.js de la aplicación de reacción. Creo que dado que reescribe el encabezado en localhost, cuando está incrustado, busca localhost, en el que la aplicación ya no se ejecuta

Opción 1

Si no necesita utilizar la autenticación, puede agregar configuraciones a los comandos ngrok

ngrok http 9000 --host-header = reescribir

o

ngrok http 9000 --host-header = "localhost: 9000"

Pero en este caso, la autenticación no funcionará en su sitio web porque ngrok reescribe los encabezados y la sesión no es válida para su dominio ngrok

opcion 2

Si está utilizando webpack, puede agregar la siguiente configuración

devServer: {
    disableHostCheck: true
}

En ese caso, el encabezado de autenticación será válido para su dominio ngrok

Usé esta configuración en una aplicación de reacción que funciona. Creé un archivo de configuración llamado configstrp.js que contiene lo siguiente:

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

Requerir el archivo en el servidor.

const configstrp      = require('./config/configstrp.js');
const ngrok = configstrp.ngrok.enabled ? require('ngrok') : null;

y conectar como tal

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 {

    }
   }
  );
 }

No pase un subdominio si no tiene un dominio personalizado