我使用 Cloud9.io ubuntu VM Online IDE 作为环境，通过解决此错误，我已经减少到仅使用 Webpack 开发服务器运行应用程序。

我启动它:

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

$IP 是一个具有主机地址的变量 $PORT 具有端口号。

我被指示在 Cloud 9 中部署应用程序时使用这些变量，因为它们具有默认的 IP 和端口信息。

服务器启动并编译代码，没问题，但它没有向我显示索引文件。只有一个空白屏幕，文本为“无效的主机 header ”。

这是请求:

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-server 2.4.4 添加了主机检查。您可以通过将其添加到您的 webpack 配置来禁用它:

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

请注意，此修复不安全。

请参阅this answer寻求安全的解决方案。

选项是refactored在版本 4.0.0 中。现在应该使用 allowedHosts 选项:

devServer: { 
  allowedHosts: "all" 
}