"Invalid Host header"

reactjs
javascript
nodejs

#1

EDIT: Answered in Stack Overflow
http://stackoverflow.com/questions/43619644/i-am-getting-an-invalid-host-header-message-when-running-my-react-app-in-a-we

When I have a React application running on a webpack dev server and try to access the preview of the application, the page loads to this message. Not sure why.

This config is what I am using:
webpack-dev-server -d --watch --host $IP --port $PORT --history-api-fallback

Any help would be appreciated. Thanks


#2

for port 80:

“start”: webpack-dev-server --inline --progress --port 80 --hot --host 0.0.0.0 **--public www.example.com**,

for port 8080

“start”: webpack-dev-server --inline --progress --port 8080 --hot --host 0.0.0.0 **--public www.example.com:8080**,

New version of webpack-dev-server pack only the issue is raised
https://github.com/webpack/webpack-dev-server/issues/882


#3

So is the workaround for now to specify host explicitly? Is it possible to read it from the environment, like $IP?

EDIT: just verified that it doesn’t work. Specifying ****.c9users.io as host does not correspond to the Cloud9’s host IP, so it refuses to start.

EDIT2: appending the .c9users.io address to /etc/hosts for the private IP seemed to work. Not sure if this address will be stable though. Any comment from the team?

EDIT3: changing the private IP to 0.0.0.0 also seems to work. So the current solution seems to be specifying the c9.users.io hostname explicitly for the dev server, and also to add it to /etc/hosts with 0.0.0.0 target IP. Could that lead to any issues with routing from Cloud9 etc. down the road?

P.S. I’m using Angular with ng serve instead of directly calling Webpack (if that matters).

Thanks


#4

There is a ‘public’ property, so it would be something like this if you are using CLI.

webpack-dev-server -d --watch --host $IP --port $PORT --history-api-fallback --public xxxx.c9users.io

I specify it on my webpack.config.js which something I prefer.


#5

Ah, I see. So I might need to ping Angular-CLI to add that option to their config. Thanks


#6

you can use --public $C9_HOSTNAME instead of xxxx.c9users.io


#8

Try ng serve -host 0.0.0.0 --disableHostCheck
This will make Webpack disable check on Host name and you will be good to run the app.


#9

Good, thanks!! snehaldpatel1992 :+1::+1:


#10

This helped me! Thank you so much :slight_smile:


#11

Good day! Had the same problem but with react.js. When I starting server with:
webpack-dev-server --port $PORT --host $IP --disableHostCheck
it is starting server on http://0.0.0.0:8080/webpack-dev-server/
but I need to start in on https://0.0.0.0:8080/webpack-dev-server/ or on https://react-express-max1236.c9users.io:8080 .
Please help - here is my workspace : https://ide.c9.io/max1236/react-express


#12

I fix this with webpack-dev-server -d --watch --host $IP --port $PORT --history-api-fallback --public $C9_HOSTNAME :man_student:
the main problem was my index.html. Actioly it is about it path , it was not in “/”, it was in “public”. 8)
But I will be glad to hear were I can configure this option.
:blush: