Estoy tratando de probar mi aplicación React en un dispositivo móvil. Estoy usando ngrok para hacer que mi servidor local esté disponible para otros dispositivos y lo he hecho funcionar con una variedad de otras aplicaciones. Sin embargo, cuando intento conectar ngrok al servidor de desarrollo de React, aparece el error:
Invalid Host HeaderCreo que React bloquea todas las solicitudes de otra fuente de forma predeterminada. ¿Alguna idea?
Estoy encontrando un problema similar y encontré dos soluciones que funcionan en cuanto a ver la aplicación directamente en un navegador
ngrok http 8080 -host-header="localhost:8080" ngrok http --host-header=rewrite 8080obviamente reemplace 8080 con cualquier puerto en el que esté ejecutando
esta solución aún genera un error cuando uso esto en una página incrustada, que extrae el archivo 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 usar 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 la sesión y los encabezados de reescritura de ngrok no son válidos para su dominio de ngrok.
opcion 2
Si está utilizando un paquete web, puede agregar la siguiente configuración
devServer: { disableHostCheck: true }En ese caso, el encabezado de autenticación será válido para su dominio ngrok
No sé por qué, pero probé todo y no funcionó para mí. Lo que finalmente funcionó para mí es esto: ngrok http https://localhost:4200 -host-header="localhost:4200"
podría ser útil para alguien