Niepoprawny nagłówek hosta, gdy ngrok próbuje połączyć się z serwerem programistów React

191

Próbuję przetestować moją aplikację React na urządzeniu mobilnym. Używam ngrok, aby udostępnić mój lokalny serwer innym urządzeniom i mam to do dyspozycji z wieloma innymi aplikacjami. Jednak gdy próbuję połączyć ngrok z serwerem programistów React, pojawia się błąd:

Invalid Host Header

Uważam, że React domyślnie blokuje wszystkie żądania z innego źródła. jakieś pomysły?

reactjs localhost ngrok

— Patrick Connors
źródło

Odpowiedzi:

558

Mam podobny problem i znalazłem dwa rozwiązania, które działają tak daleko, jak przeglądanie aplikacji bezpośrednio w przeglądarce

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

oczywiście zastąp 8080 jakimkolwiek portem, na którym pracujesz

to rozwiązanie nadal powoduje błąd, gdy używam tego na stronie osadzonej, która pobiera plik bundle.js z aplikacji reagowania. Myślę, że ponieważ przepisuje nagłówek do localhost, gdy jest on osadzony, szuka localhost, na którym aplikacja już nie działa

— tekstowy
źródło

pierwszy wystarczył

— Sudhir

Na wypadek, gdyby ktoś napotkał ten problem: to działa, ale wydaje się, że psuje pliki cookie, co oznacza, że psuje mechanizmy logowania i tym podobne!

— pdowling,

Ten problem dotyczył również Angulara 6 i działa, dzięki

— Druta Ruslan,

-host-headerPowinny pochodzić przed numerem portu, więc pierwszy przykład powinien byćngrok http -host-header="localhost:8080" 8080

— Sean Bean

./ngrok http --host-header = przepisz 8080

— Sreejith kontra

opcja 1

Jeśli nie musisz używać uwierzytelniania, możesz dodać konfiguracje do poleceń ngrok

ngrok http 9000 --host-header = przepisz

lub

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

Ale w tym przypadku Uwierzytelnianie nie będzie działać w Twojej witrynie, ponieważ nagłówki i sesja przepisywania ngrok nie są prawidłowe dla Twojej domeny ngrok

Opcja 2

Jeśli używasz pakietu internetowego, możesz dodać następującą konfigurację

devServer: {
    disableHostCheck: true
}

W takim przypadku nagłówek uwierzytelnienia będzie ważny dla Twojej domeny ngrok

— Piotr Gyschuk
źródło

Użyłem tego ustawienia w działającej aplikacji, która działa. Utworzyłem plik konfiguracyjny o nazwie configstrp.js, który zawiera następujące elementy:

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

Wymagaj pliku na serwerze.

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

i połącz jako taki

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 {

    }
   }
  );
 }

Nie przekazuj poddomeny, jeśli nie masz domeny niestandardowej

— FlyingSnowGhost
źródło