“Invalid Host Header” in When running React App

Question

I am having one simple project of React JS and I am deploying into OSE. Also I am using below dependencies in my project.

 "webpack": "^2.2.0",
 "webpack-dev-server": "^1.14.1",
 "react": "^15.5.4",
 "react-router-dom": "^4.1.1"

also I am running my project through below build script.

"build": "SET NODE_ENV=production && webpack-dev-server --host 0.0.0.0 --inline --history-api-fallback --content-base . "

Everything goes fine in OSE and Webpack is compiled successfully. But on accessing the url it shows "Invalid Host Header" on the webpage.

Could anyone help on this. Somewhat New in React.

Thanks in Advance.

Answer 1

At your webpack config, you could add disableHostCheck: true at devServer configuration. For example,

devServer: {
  disableHostCheck: true
}

Answer 2

Just to explain why this is happening.

webpack-dev-server has released v2.4.3.

Quoting their patch note:

The Host header of the request have to match the listening adress or the host provided in the public option. Make sure to provide correct values here.

They have also included disableHostCheck to turn this check off, BUT

Only use it when you know what you do. Not recommended.

Answer 3

change the host to 127.0.0.1 in build script.

"build": "SET NODE_ENV=production && webpack-dev-server --host 127.0.0.1 --inline --history-api-fallback --content-base . "