Intestazione host non valida quando ngrok tenta di connettersi al server di sviluppo React

191

Sto provando a testare la mia applicazione React su un dispositivo mobile. Sto usando ngrok per rendere il mio server locale disponibile per altri dispositivi e ho ottenuto che funzioni con una varietà di altre applicazioni. Tuttavia, quando provo a connettere ngrok al server di sviluppo React, ottengo l'errore:

Invalid Host Header

Ritengo che React blocchi tutte le richieste da un'altra fonte per impostazione predefinita. qualche idea?

reactjs localhost ngrok

— Patrick Connors
fonte

Risposte:

559

Sto riscontrando un problema simile e ho trovato due soluzioni che funzionano fino a visualizzare l'applicazione direttamente in un browser

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

ovviamente sostituisci 8080 con qualunque porta tu stia funzionando

questa soluzione genera ancora un errore quando lo utilizzo in una pagina incorporata, che estrae bundle.js dall'app di reazione. Penso che dal momento che riscrive l'intestazione su localhost, quando questo è incorporato, sta cercando localhost, su cui l'app non è più in esecuzione

— testuale
fonte

il primo è bastato

— Sudhir,

Nel caso in cui qualcun altro incontri questo problema: Funziona, ma sembra incasinare i cookie, il che significa che rompe i meccanismi di accesso e simili!

— frugando il

Questo problema riguardava anche Angular 6 e funziona, grazie

— Druta Ruslan,

L' -host-headerdovrebbe venire prima che il numero della porta, in modo che il primo esempio dovrebbe esserengrok http -host-header="localhost:8080" 8080

— Sean Bean il

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

— sreejith vs

opzione 1

Se non è necessario utilizzare l'autenticazione, è possibile aggiungere configurazioni ai comandi ngrok

ngrok http 9000 --host-header = riscrivi

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

Ma in questo caso l'autenticazione non funzionerà sul tuo sito web perché ngrok riscrive le intestazioni e la sessione non è valida per il tuo dominio ngrok

opzione 2

Se si utilizza il webpack è possibile aggiungere la seguente configurazione

devServer: {
    disableHostCheck: true
}

In tal caso, l'intestazione di autenticazione sarà valida per il tuo dominio ngrok

— Peter Gyschuk
fonte

Ho usato questa configurazione in un'app di reazione che funziona. Ho creato un file di configurazione denominato configstrp.js che contiene quanto segue:

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

Richiedi il file nel server.

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

e connettiti come tale

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 {

    }
   }
  );
 }

Non passare un sottodominio se non si dispone di un dominio personalizzato

— FlyingSnowGhost
fonte