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

ngrok invalid host header

Question

Estoy intentando 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?

Answer 1

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

Answer 2

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