web-dev-qa-db-ja.com

ngrokがReact devサーバーに接続しようとしたときの無効なホストヘッダー

モバイルデバイスでReactアプリケーションをテストしようとしています。私は私のローカルサーバーを他のデバイスから利用できるようにするためにngrokを使用しています。しかし、ngrokをReact devサーバーに接続しようとすると、エラーが発生します。

Invalid Host Header

私はReactがデフォルトで他のソースからのすべてのリクエストをブロックすると信じています。何かご意見は？

reactjslocalhostngrok
91
Patrick Connors

私は同様の問題に遭遇し、ブラウザで直接アプリケーションを見る限りにおいてうまくいく2つの解決策を見つけました

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

明らかに8080をあなたが走っているどんなポートでも取り替えます

私が反応するアプリからbundle.jsを引っ張る埋め込みページでこれを使うとき、この解決策はまだエラーを発生させます。ヘッダーがlocalhostに書き換えられているので、これが埋め込まれている場合は、localhostを見ていることになります。これはアプリではもう実行されていません。

301
textual

私はこれを動作する反応アプリで設定しました。以下を含むconfigstrp.jsという設定ファイルを作成しました。

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

サーバー内のファイルを要求してください。

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

そしてそのように接続する

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 {

    }
   }
  );
 }

カスタムドメインがない場合はサブドメインを渡さないでください

1
FlyingSnowGhost