Cloud9.ioのWebpack開発サーバーでReactアプリを実行すると、「無効なホストヘッダー」メッセージが表示されます

私は環境としてCloud9.io ubuntu VM Online IDEを使用していますが、このエラーをトラブルシューティングすることで、アプリをWebpack開発サーバーで実行するだけに減らしました。

私はそれを起動します：

webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$ IPは、ホストアドレスを持つ変数です。$ PORTにはポート番号があります。

これらの変数はデフォルトのIPおよびポート情報を持っているため、Cloud 9にアプリをデプロイするときに使用するように指示されています。

サーバーが起動してコードをコンパイルします。問題ありませんが、インデックスファイルは表示されません。「無効なホストヘッダー」をテキストとして含む空白の画面のみ。

これはリクエストです：

GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

これは私のpackage.jsonです：

{
  "name": "workspace",
  "version": "0.0.0",
  "scripts": {
    "dev": "webpack -d --watch",
    "server": "webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT",
    "build": "webpack --config webpack.config.js"
  },
  "author": "Artur Vieira",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "file-loader": "^0.11.1",
    "node-fetch": "^1.6.3",
    "react": "^15.5.4",
    "react-bootstrap": "^0.30.9",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4",
    "whatwg-fetch": "^2.0.3"
  }
}

これはwebpack.config.jsです：

const path = require('path');

module.exports = {

  entry: ['whatwg-fetch', "./app/_app.jsx"], // string | object | array
  // Here the application starts executing
  // and webpack starts bundling
  output: {
    // options related to how webpack emits results

    path: path.resolve(__dirname, "./public"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js", // string
    // the filename template for entry chunks

    publicPath: "/public/", // string
    // the url to the output directory resolved relative to the HTML page
  },

  module: {
    // configuration regarding modules

    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "./app")
        ],
        exclude: [
          path.resolve(__dirname, "./node_modules")
        ],
        loader: "babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },

  devServer: {
    compress: true
  }
}

ホストのセットアップが原因で、Webpack開発サーバーがこれを返しています。webpack-dev-server / lib / Server.jsの60行目。https：//github.com/webpack/webpack-dev-serverから

私の質問は、このチェックに正しく合格するようにセットアップする方法です。どんな助けでも大歓迎です。

この問題は、webpack-dev-server2.4.4がホストチェックを追加するために発生します。これをwebpack設定に追加することで無効にできます：

 devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it

 }      

編集：この修正は安全ではないことに注意してください。

安全なソリューションについては、次の回答を参照してください：https : //stackoverflow.com/a/43621275/5425585

私は、私が設定する必要があることがわかりました publicdevServerプロパティをリクエストのホスト値。その外部アドレスに表示されます。

だから私はこれを私のwebpack.config.jsに必要としました

devServer: {
  compress: true,
  public: 'store-client-nestroia1.c9users.io' // That solved it
}

別の解決策は、CLIで使用することです。

webpack-dev-server --public $ C9_HOSTNAME <-Cloud9外部IPの変数

これは私のために働いたものです：

webpack.config.jsのdevServerの下にallowedHostsを追加します。

devServer: {
  compress: true,
  inline: true,
  port: '8080',
  allowedHosts: [
      '.amazonaws.com'
  ]
},

--hostまたは--public paramsを使用する必要はありませんでした。

webpack-dev-serverを使用する場合は、この構成をwebpack構成ファイルに追加します（ホストを0.0.0.0として指定することもできます）。

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}

より安全なオプションは、次のようにWebHost構成にallowedHostsを追加することです。

module.exports = {
devServer: {
 allowedHosts: [
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  'host2.com'
   ]
  }
};

配列には許可されたすべてのホストが含まれます。サブドミアンを指定することもできます。詳細はこちら

CRAからまだイジェクトしていない場合、webpack構成を簡単に変更することはできません。構成ファイルはで非表示になっていnode_modules/react_scripts/config/webpackDevServer.config.jsます。その構成を変更することはお勧めしません。

代わりに、環境変数DANGEROUSLY_DISABLE_HOST_CHECKをtrueに設定して、ホストチェックを無効にすることができます。

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

webpack構成ファイルを編集するよりも、ホストチェックを無効にする簡単な方法は、.envファイルをルートフォルダーに追加して次のように配置することです。

DANGEROUSLY_DISABLE_HOST_CHECK=true

変数名が示すように、変数を無効にすることは安全ではなく、開発環境でのみ使用することをお勧めします。

C9でcreate-react-appを使用している場合は、このコマンドを実行して開始します

npm run start --public $C9_HOSTNAME

そして、あなたのホスト名が何であれアプリにアクセスします（例えば$C_HOSTNAME、ホスト名を取得するためにターミナルに入力します）

webpack-dev-serverコンテナーで実行していて、コンテナー名を介してコンテナーにリクエストを送信している場合、このエラーが発生します。同じネットワーク上の他のコンテナーからのリクエストを許可するには、--publicオプションを使用してコンテナー名（またはコンテナーの解決に使用される名前）を指定するだけです。これは、セキュリティチェックを完全に無効にするよりも優れています。

私の場合、私はdocker-compose webpack-dev-serverという名前のコンテナーで実行していましたassets。開始コマンドを次のように変更しました：

webpack-dev-server --mode development --host 0.0.0.0 --public assets

そして、もう一方のコンテナはを介してリクエストを行うことができましたhttp://assets:5000。