1. ホーム
  2. reactjs

[解決済み】ngrokがReact devサーバーに接続しようとすると、無効なホストヘッダが表示される。

2022-02-17 02:30:53

質問

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

Invalid Host Header 

Reactはデフォルトで別ソースからのリクエストをすべてブロックしていると思います。何か考えはありますか?

解決方法は?

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

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

8080は、現在使用しているポートに置き換えてください。

この解決策は、私が反応アプリからbundle.jsを引き出す埋め込みページでこれを使用すると、まだエラーを発生させる。ヘッダーをlocalhostに書き換えているため、埋め込み時にアプリが実行されていないlocalhostを探すことになるのだと思います。