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

191

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?

reactjs localhost ngrok

— Patrick Connors
fuente

Respuestas:

559

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

— textual
fuente

el primero fue suficiente

— Sudhir

En caso de que alguien más se encuentre con este problema: ¡Esto funciona, pero parece estropear las cookies, lo que significa que rompe los mecanismos de inicio de sesión y tal!

— Caída del

Este problema también fue para Angular 6, y funciona, gracias

— Druta Ruslan

El -host-headerdebería ser presentado ante el número de puerto, por lo que el primer ejemplo debería serngrok http -host-header="localhost:8080" 8080

— Sean Bean

./ngrok http --host-header = rewrite 8080

— sreejith vs

Opción 1

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

ngrok http 9000 --host-header = reescribir

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

— Peter Gyschuk
fuente

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

— FlyingSnowGhost
fuente