En-tête d'hôte non valide lorsque ngrok tente de se connecter au serveur de développement React

191

J'essaye de tester mon application React sur un appareil mobile. J'utilise ngrok pour rendre mon serveur local disponible à d'autres appareils et je l'ai fait fonctionner avec une variété d'autres applications. Cependant, lorsque j'essaye de connecter ngrok au serveur de développement React, j'obtiens l'erreur:

Invalid Host Header

Je crois que React bloque toutes les demandes d'une autre source par défaut. Des pensées?

reactjs localhost ngrok Patrick Connors
la source

Réponses:

559

Je rencontre un problème similaire et j'ai trouvé deux solutions qui fonctionnent jusqu'à la visualisation de l'application directement dans un navigateur

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

remplacez évidemment 8080 par le port sur lequel vous utilisez

cette solution génère toujours une erreur lorsque j'utilise ceci dans une page intégrée, qui extrait le bundle.js de l'application react. Je pense que depuis qu'il réécrit l'en-tête en localhost, lorsqu'il est intégré, il se tourne vers localhost, sur lequel l'application ne fonctionne plus

textuel
la source
12
le premier était suffisant
Sudhir
1
Au cas où quelqu'un d'autre rencontrerait ce problème: cela fonctionne, mais cela semble gâcher les cookies, ce qui signifie que cela brise les mécanismes de connexion et autres!
pdowling
Ce problème était également pour Angular 6, et cela fonctionne, merci
Druta Ruslan
1
Le -host-headerdevrait venir avant le numéro de port, donc le premier exemple devrait êtrengrok http -host-header="localhost:8080" 8080
Sean the Bean
1
./ngrok http --host-header = réécrire 8080
sreejith vs
5

Option 1

Si vous n'avez pas besoin d'utiliser l'authentification, vous pouvez ajouter des configurations aux commandes ngrok

ngrok http 9000 --host-header = réécrire

ou

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

Mais dans ce cas, l'authentification ne fonctionnera pas sur votre site Web car la réécriture des en-têtes et de la session ngrok n'est pas valide pour votre domaine ngrok

Option 2

Si vous utilisez webpack, vous pouvez ajouter la configuration suivante

devServer: {
    disableHostCheck: true
}

Dans ce cas, l'en-tête d'authentification sera valide pour votre domaine ngrok

Peter Gyschuk
la source
1

J'ai utilisé cette configuration dans une application de réaction qui fonctionne. J'ai créé un fichier de configuration nommé configstrp.js qui contient les éléments suivants:

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

Exigez le fichier sur le serveur. 

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

et connectez-vous en tant que tel

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 {

    }
   }
  );
 }

Ne transmettez pas un sous-domaine si vous n'avez pas de domaine personnalisé

VolerSnowGhost
la source