在Cloud9.io的Webpack开发服务器上运行我的React应用程序时，收到“无效的主机头”消息

我正在使用作为一个环境，一个Cloud9.io Ubuntu的VM在线IDE，我已经减less了解决这个错误，只是与Webpack开发服务器运行应用程序。

我启动它： 

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

$ IP是一个variables，其主机地址$ PORT有端口号。

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

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

这是请求： 

 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添加主机检查 

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

我发现，我需要将devServer的public属性设置为我的请求的主机值。 因为它将显示在该外部地址。

所以我需要在我的webpack.config.js 

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

另一个解决scheme是在CLI上使用它：

webpack-dev-server –public $ C9_HOSTNAME < – var for Cloud9外部IP

编辑node_modules/webpack-dev-server/lib/Server.js行425更新行 

 return true;
Interesting Posts