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

191

Reactアプリケーションをモバイルデバイスでテストしようとしています。私はngrokを使用してローカルサーバーを他のデバイスで利用できるようにしており、他のさまざまなアプリケーションでこれを機能させています。しかし、ngrokをReact開発サーバーに接続しようとすると、エラーが発生します。

Invalid Host Header

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

reactjs localhost ngrok

— パトリック・コナーズ
ソース

回答:

559

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

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

明らかに8080をあなたが実行しているポートに置き換えてください

このソリューションでは、埋め込みページでこれを使用するとエラーが発生します。これにより、反応アプリからbundle.jsがプルされます。ヘッダーをlocalhostに書き換えるため、これが埋め込まれていると、アプリが実行されていないlocalhostを探していると思います

— テキスト
ソース

最初のもので十分でした

— Sudhir

他の誰かがこの問題に遭遇した場合：これは機能しますが、Cookieをめちゃくちゃにするようです。つまり、ログインメカニズムなどを壊します。

— 2018

この問題は、角度の6のためにもありましたし、それは動作しますが、おかげで

— Drutaルスラン

-host-headerその最初の例があるべき、ポート番号の前に来る必要がありますngrok http -host-header="localhost:8080" 8080

— ショーン・ビーン

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

— スリージス対

オプション1

認証を使用する必要がない場合は、ngrokコマンドに構成を追加できます

ngrok http 9000 --host-header = rewrite

または

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

ただし、この場合、ngrok書き換えヘッダーとセッションがngrokドメインに対して無効であるため、認証はWebサイトでは機能しません。

オプション2

webpackを使用している場合は、次の構成を追加できます

devServer: {
    disableHostCheck: true
}

その場合、認証ヘッダーはngrokドメインで有効になります

— ピーター・ギシュク
ソース

動作する反応アプリでこの設定を使用しました。以下を含む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 {

    }
   }
  );
 }

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

— フライングスノーゴースト
ソース