Ngrok React dev sunucusuna bağlanmaya çalıştığında geçersiz Ana Bilgisayar Üstbilgisi

191

React uygulamamı bir mobil cihazda test etmeye çalışıyorum. Yerel sunucumu diğer aygıtlar için kullanılabilir hale getirmek için ngrok kullanıyorum ve bunu çeşitli diğer uygulamalarla çalışıyorum. Ancak, React dev sunucusuna ngrok bağlanmaya çalıştığınızda, hatayı alıyorum:

Invalid Host Header

React'ın varsayılan olarak başka bir kaynaktan gelen tüm istekleri engellediğine inanıyorum. Düşüncesi olan var mı?

reactjs localhost ngrok

— Patrick Connors
kaynak

Yanıtlar:

559

Benzer bir sorunla karşılaşıyorum ve uygulamayı doğrudan bir tarayıcıda görüntüleme kadar çalışan iki çözüm buldum

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

Açıkçası 8080'i üzerinde çalıştığınız bağlantı noktasıyla değiştirin

Bu çözüm gömülü bir sayfada bunu kullandığımda hala hata veriyor, bu da bundle.js'yi tepki uygulamasından çekiyor. Sanırım üstbilgiyi localhost'a yeniden yazdığı için, bu gömülü olduğunda, uygulamanın artık çalışmadığı localhost'a bakıyor

— metinsel
kaynak

ilki yeterliydi

— Sudhir

Başka birinin bu problemle karşılaşması durumunda: Bu işe yarar, ancak çerezleri karıştırıyor gibi görünüyor, yani giriş mekanizmalarını ve benzeri ihlal ediyor!

— pdowling

Bu sorun aynı zamanda Açısal 6

— içindi

-host-headerİlk örnek olmalıdır, böylece port numarasını önce gelmelidirngrok http -host-header="localhost:8080" 8080

— Sean Bean

./ngrok http --host-header = yeniden yaz 8080

— sreejith vs

seçenek 1

Kimlik Doğrulaması kullanmanız gerekmiyorsa, ngrok komutlarına yapılandırmalar ekleyebilirsiniz.

ngrok http 9000 --host-header = yeniden yaz

veya

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

Ancak bu durumda Kimlik Doğrulama web sitenizde çalışmaz çünkü ngrok yeniden yazma üstbilgileri ve oturumu ngrok alan adınız için geçerli değildir

seçenek 2

Webpack kullanıyorsanız aşağıdaki yapılandırmayı ekleyebilirsiniz

devServer: {
    disableHostCheck: true
}

Bu durumda, Kimlik Doğrulama başlığı ngrok alan adınız için geçerli olacaktır

— Peter Gyschuk
kaynak

Bu kurulumu çalışan bir tepki uygulamasında kullandım. Aşağıdakileri içeren configstrp.js adlı bir yapılandırma dosyası oluşturdum:

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

Dosyayı sunucuda isteyin.

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

ve bu şekilde bağlan

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 {

    }
   }
  );
 }

Özel bir alan adınız yoksa bir alt alan adı iletmeyin

— FlyingSnowGhost
kaynak