Ungültiger Host-Header, wenn ngrok versucht, eine Verbindung zum React dev-Server herzustellen

188

Ich versuche, meine React-Anwendung auf einem mobilen Gerät zu testen. Ich verwende ngrok, um meinen lokalen Server für andere Geräte verfügbar zu machen, und habe dies mit einer Vielzahl anderer Anwendungen zum Laufen gebracht. Wenn ich jedoch versuche, ngrok mit dem React dev-Server zu verbinden, wird folgende Fehlermeldung angezeigt:

Invalid Host Header

Ich glaube, dass React standardmäßig alle Anfragen von einer anderen Quelle blockiert. Irgendwelche Gedanken?

reactjs localhost ngrok

— Patrick Connors
quelle

Antworten:

551

Ich bin auf ein ähnliches Problem gestoßen und habe zwei Lösungen gefunden, die so funktionieren, dass die Anwendung direkt in einem Browser angezeigt wird

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

Ersetzen Sie 8080 offensichtlich durch den Port, auf dem Sie arbeiten

Diese Lösung löst immer noch einen Fehler aus, wenn ich dies in einer eingebetteten Seite verwende, die die bundle.js aus der React-App abruft. Ich denke, da es den Header in localhost umschreibt, wenn es eingebettet ist, sucht es nach localhost, auf dem die App nicht mehr läuft

— Text
quelle

Der erste war genug

— Sudhir

Für den Fall, dass jemand anderes auf dieses Problem stößt: Dies funktioniert, aber es scheint Cookies durcheinander zu bringen, was bedeutet, dass Anmeldemechanismen und dergleichen unterbrochen werden!

— pdowling

Dieses Problem war auch für Angular 6, und es funktioniert, danke

— Druta Ruslan

Das -host-headersollte vor der Portnummer kommen, also sollte das erste Beispiel seinngrok http -host-header="localhost:8080" 8080

— Sean the Bean

./ngrok http --host-header = 8080 neu schreiben

— sreejith vs

Option 1

Wenn Sie die Authentifizierung nicht verwenden müssen, können Sie ngrok-Befehlen Konfigurationen hinzufügen

ngrok http 9000 --host-header = neu schreiben

oder

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

In diesem Fall funktioniert die Authentifizierung auf Ihrer Website jedoch nicht, da das Umschreiben von Headern und Sitzungen durch ngrok für Ihre ngrok-Domain nicht gültig ist

Option 2

Wenn Sie Webpack verwenden, können Sie die folgende Konfiguration hinzufügen

devServer: {
    disableHostCheck: true
}

In diesem Fall ist der Authentifizierungsheader für Ihre ngrok-Domain gültig

— Peter Gyschuk
quelle

Ich habe dieses Setup in einer funktionierenden Reaktions-App verwendet. Ich habe eine Konfigurationsdatei mit dem Namen configstrp.js erstellt, die Folgendes enthält:

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

Benötigen Sie die Datei auf dem Server.

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

und als solche verbinden

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 {

    }
   }
  );
 }

Übergeben Sie keine Subdomain, wenn Sie keine benutzerdefinierte Domain haben

— FlyingSnowGhost
quelle