web-dev-qa-db-ja.com

HerokuのReactJS APP "無効なホストヘッダー"ホスト構成？

私は React app をHerokuに配置しようとしています。プロジェクト全体には、1つのAPI（エクスプレス）と1つのクライアント（ReactJS）が含まれています。 APIをherokuに配置しました。しかし、クライアントをHerokuに配置すると、ビルドが成功したことが示されます。しかし、私が open の場合、Invalid Host header。

私はこの問題をググっていて、多くの人が Host を設定するように言っています。しかし、彼らはwebpackを使用しています。私はこれをcreate-react-appとnpm start。この問題を最も簡単に解決する方法を知りたい。ありがとう。

javascriptreactjsherokuwebpackredux
11
fourth

なんらかの理由でサーバーなしでクライアントをデプロイしようとした場合は、必ず次のものを削除してください。

"proxy": "http://localhost:5000"

クライアントのpackage.jsonから。

2019年7月を編集：

作成React App 2.0はプロキシの定義方法を変更しました。使用しているバージョンを確認するには、クライアント側のpackage.jsonを確認してください： "2.x.x"より大きい "react-scripts"

次にclient /ディレクトリにこのパッケージをインストールします。

npm install http-proxy-middleware --save

Client/src /ディレクトリにsetupProxy.jsファイルを作成します。このファイルをどこにもインポートする必要はありません。CRAはこの名前でファイルを探してロードします。

プロキシを追加する方法はいくつかあります。

オプション1：

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    proxy(["/api", , "/otherApi"], { target: "http://localhost:5000" })
  );
};

オプション2

  const proxy = require('http-proxy-middleware');

    module.exports = function(app) {
        app.use(proxy('/api/**', { target: 'http://localhost:5000' }));
        app.use(proxy('/otherApi/**', { target: 'http://localhost:5000' }));
    };

コメントへの回答

このプロキシは、開発環境でのみ使用されます。本番/ Herokuでは、すべてが同じサーバーで実行されるため、プロキシは必要ありません。

create-react-appサーバーはDev環境で実行されるため、アプリケーションがPRODモードで実行されると、本番JSバンドルの生成に使用されますNode/Expressサーバーによって提供されます。

確認してください この他の答え ここで、製品で動作させるために必要なものを説明します。

8
Roberto Rodriguez

Invalid Host Headerは DNS Rebinding の解決策として組み込まれています。

これを解決するには、ルートフォルダーに。env.developmentという名前のファイルを作成する必要があります。このファイル内で、設定

Host=name.herokuapp.com

ドキュメントから： https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-Host-header-errors-after-設定プロキシ

4
Agney