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?

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


12
el primero fue suficiente
Sudhir

1
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

1
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

1
./ngrok http --host-header = rewrite 8080
sreejith vs

5

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


1

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.