Header Host Tidak Valid ketika ngrok mencoba terhubung ke React dev server

191

Saya mencoba menguji aplikasi Bereaksi saya di perangkat seluler. Saya menggunakan ngrok untuk membuat server lokal saya tersedia untuk perangkat lain dan mendapatkan ini berfungsi dengan berbagai aplikasi lain. Namun, ketika saya mencoba menghubungkan ngrok ke server React dev, saya mendapatkan kesalahan:

Invalid Host Header

Saya percaya bahwa Bereaksi memblokir semua permintaan dari sumber lain secara default. Adakah pikiran?

reactjs localhost ngrok

— Patrick Connors
sumber

Jawaban:

559

Saya mengalami masalah serupa dan menemukan dua solusi yang berfungsi sejauh melihat aplikasi secara langsung di browser

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

jelas ganti 8080 dengan port apa pun yang Anda jalankan

solusi ini masih memunculkan kesalahan ketika saya menggunakan ini di halaman yang disematkan, yang menarik bundle.js dari aplikasi reaksi. Saya pikir karena ini menulis ulang header ke localhost, ketika ini tertanam, itu mencari ke localhost, di mana aplikasi tidak lagi berjalan di

— tekstual
sumber

yang pertama sudah cukup

— Sudhir

Seandainya ada orang lain yang mengalami masalah ini: Ini berfungsi, tetapi sepertinya mengacaukan cookie, artinya merusak mekanisme masuk dan semacamnya!

— pdowling

Masalah ini juga untuk Angular 6, dan itu berhasil, terima kasih

— Druta Ruslan

The -host-headerharus datang sebelum nomor port, sehingga contoh pertama harusngrok http -host-header="localhost:8080" 8080

— Sean Bean

./ngrok http --host-header = tulis ulang 8080

— sreejith vs

Pilihan 1

Jika Anda tidak perlu menggunakan Otentikasi, Anda dapat menambahkan konfigurasi ke perintah ngrok

ngrok http 9000 --host-header = menulis ulang

atau

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

Tetapi dalam kasus ini Otentikasi tidak akan berfungsi di situs web Anda karena header dan sesi penulisan ulang ngrok tidak berlaku untuk domain ngrok Anda

pilihan 2

Jika Anda menggunakan webpack, Anda dapat menambahkan konfigurasi berikut

devServer: {
    disableHostCheck: true
}

Dalam hal itu, header Otentikasi akan valid untuk domain ngrok Anda

— Peter Gyschuk
sumber

Saya menggunakan pengaturan ini di aplikasi reaksi yang berfungsi. Saya membuat file config bernama configstrp.js yang berisi yang berikut:

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

Membutuhkan file di server.

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

dan terhubung seperti itu

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 {

    }
   }
  );
 }

Jangan melewati subdomain jika Anda tidak memiliki domain khusus

— FlyingSnowGhost
sumber