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

Question

J'essaie de tester mon application React sur un appareil mobile. J'utilise ngrok pour mettre mon serveur local à la disposition d'autres périphériques et le fait fonctionner avec une variété d'autres applications. Cependant, lorsque j'essaie de connecter ngrok au serveur de développement de React, le message d'erreur suivant s'affiche:

 Invalid Host Header 
 

Je pense que React bloque par défaut toutes les requêtes provenant d’une autre source. Des pensées?

Answer 1

Je rencontre un problème similaire et trouve deux solutions qui fonctionnent aussi loin que de visualiser l'application directement dans un navigateur

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

évidemment remplacer 8080 avec quel que soit le port que vous exécutez

cette solution soulève toujours une erreur lorsque je l'utilise 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 de localhost, quand cela est intégré, il regarde vers localhost, sur lequel l'application ne fonctionne plus

Answer 2

J'ai utilisé cette installation 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
},   }
 

Exiger le fichier sur le serveur.

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

et se connecter 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 passez pas un sous-domaine si vous n'avez pas de domaine personnalisé