Cabeçalho de host inválido quando o ngrok tenta se conectar ao servidor de desenvolvimento React

191

Estou tentando testar meu aplicativo React em um dispositivo móvel. Estou usando o ngrok para disponibilizar meu servidor local para outros dispositivos e consegui isso trabalhando com uma variedade de outros aplicativos. No entanto, quando tento conectar o ngrok ao servidor de desenvolvimento React, recebo o erro:

Invalid Host Header

Acredito que o React bloqueie todos os pedidos de outra fonte por padrão. Alguma ideia?

reactjs localhost ngrok

— Patrick Connors
fonte

Respostas:

559

Estou com um problema semelhante e encontrei duas soluções que funcionam tanto quanto visualizam o aplicativo diretamente em um navegador

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

obviamente, substitua o 8080 por qualquer porta em que você esteja executando

essa solução ainda gera um erro quando eu o uso em uma página incorporada, que extrai o bundle.js do aplicativo de reação. Eu acho que, uma vez que ele reescreve o cabeçalho em localhost, quando está incorporado, ele procura localhost, no qual o aplicativo não está mais sendo executado

— textual
fonte

o primeiro foi o suficiente

— Sudhir

Caso alguém encontre esse problema: Isso funciona, mas parece atrapalhar os cookies, o que significa que ele quebra os mecanismos de login e coisas do tipo!

— pdowling

Este problema também foi para Angular 6, e ele funciona, graças

— Druta Ruslan

O -host-headerdeve vir antes do número da porta, portanto, o primeiro exemplo deve serngrok http -host-header="localhost:8080" 8080

— Sean the Bean

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

— sreejith vs

Opção 1

Se você não precisar usar a autenticação, poderá adicionar configurações aos comandos ngrok

ngrok http 9000 --host-header = reescrever

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

Mas, neste caso, a autenticação não funcionará no seu site, porque o ngrok reescreve os cabeçalhos e a sessão não é válida para o seu domínio ngrok

opção 2

Se você estiver usando o webpack, poderá adicionar a seguinte configuração

devServer: {
    disableHostCheck: true
}

Nesse caso, o cabeçalho de autenticação será válido para o seu domínio ngrok

— Peter Gyschuk
fonte

Eu usei essa configuração em um aplicativo de reação que funciona. Criei um arquivo de configuração chamado configstrp.js que contém o seguinte:

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

Exija o arquivo no servidor.

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

e conectar como tal

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 {

    }
   }
  );
 }

Não passe um subdomínio se você não tiver um domínio personalizado

— FlyingSnowGhost
fonte