I get the message "Invalid host header" when I launch the React application on the Webpack developer web server on Cloud9.io

Question

I use the CloudAsio ubuntu VM Online IDE as the environment, and I reduced this problem by fixing this error by simply starting the application using the Webpack dev server.

I run it with:

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

$ IP is a variable with a host address. $ PORT has a port number.

I have been instructed to use these vars when deploying the application to Cloud 9, as they have default IP and PORT information.

The server downloads and compiles the code, no problem, but it does not show me the index file. Only a blank screen with the heading "Invalid host" as text.

This is the request:

 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 

This is my .json package:

 { "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" } } 

This is 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 dev server returns this due to my host setup. In the line webpack-dev-server / lib / Server.js 60. From https://github.com/webpack/webpack-dev-server

My question is how to set up the correct transfer of this check. Any help would be greatly appreciated.

Answer 1

I found out that I need to set the public devServer property to my request host value. Because it will be displayed on this external address.

So I need it in my webpack.config.js

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

Another solution uses it in the CLI:

webpack-dev-server --public $ C9_HOSTNAME <- var for Cloud9 external IP

Answer 2

I decided with this because webpack-dev-server 2.4.4 add host check

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

EDIT: Please note that this fix is ​​unsafe.

Please see the following answer for a secure solution: stack overflow

Answer 3

Here is what worked for me:

Add allowed hosts under devServer to your webpack.config.js:

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

I did not need to use the --host or --public options.

Answer 4

Add this configuration to your webpack configuration file when using webpack-dev-server (you can still specify the host as 0.0.0.0).

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

Answer 5

If you use create-Reaction-app on C9, just run this command to run

 npm run start --public $C9_HOSTNAME 

And access the application from any of your hostnames (for example, enter $C_HOSTNAME in the terminal to get the hostname)

Answer 6

Edit node_modules/webpack-dev-server/lib/Server.js line 425 update line as

 return true; 

Answer 7

A safer option would be to add allowHosts to your Webpack configuration as follows:

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

The array contains all the allowed hosts, you can also specify subdomians. check more here