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
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
source

le premier était suffisant

— Sudhir

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

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

./ngrok http --host-header = réécrire 8080

— sreejith vs

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

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
source

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
source