"Invalid Host header" when running Angular/cli development server c9.io

Question

Current command: ng serve --host --public $IP:$PORT

Results on my website:

Invalid Host header

Solution 1

The --disable-host-check flag works fine if you need to run from Cloud9.

I use the following command:

ng serve --open --host $IP --port $PORT --disable-host-check

Solution 2

In angular.json, add the following under architect -> serve -> options

"disableHostCheck": true

Got the answer from this Github Issue Page

Solution 3

You need to specify the host

ng serve --port 8080 --host 123.34.56.78

Solution 4

This works for me :

ngrok http --host-header=rewrite PORT

for instance :

ngrok http --host-header=rewrite 4200

Solution 5

See this issue

Edit the following line in node_modules/webpack-dev-server/lib/Server.js (line 425), change to:

return true;

I am using cloud9 IDE then run: ng serve --port 8080 --host 0.0.0.0. Now works fine.

View more solutions

Comments

[Teddy Markov]

The above solution might work too but this is what I needed.

[tarn]

You can run without edit code by append --disableHostCheck true ng serve --host 0.0.0.0 --port 8080 --disableHostCheck true

[rakesh kashyap]

change the following line in node_modules/webpack-dev-server/lib/Server.js: if(this.disableHostCheck) return true; change to return true;

[niaomingjian]

It works. But where can I find out the explanation about the '--public' option online? I only found out the '--public-host' option

[Nitin .]

ng serve --port 8080 --publicHost 0.0.0.0

[jmq]

See this Angular CLI GitHub issue regarding disableHostCheck's potential risks, just to be aware of what you're doing.

[Matthew Dolman]

Adetiloye's answer is much better

[Krishnadas PC]

It will work but if you use --disable-host-check you will get a warning in the console. WARNING: Running a server with --disable-host-check is a security risk. See medium.com/webpack/… for more information.

[Mathews Sunny]

Add some more description.

[edi]

this option is not available anymore

[Cel]

this worked for me, but it was necessary to include the exact subdomain used in the browser for public-host: ng serve --host 0.0.0.0 --public-host sub.myhost.com

[Vinay Pandya]

this is worked for me ng serve --host 0.0.0.0 --disableHostCheck true. thank you @CookAtRice

[Ubaid Azad]

Run ng serve --host 0.0.0.0 --disable-host-check

[Pablo W.]

you should not be touching node vendors

[Cec]

modifying node_modules instead of using proper ng-cli parameters is absurdly bad practice

[Tom Doe]

Just want to point out that this resolves the issue for running locally on the machine. I'm not sure if it solves it for Cloud9 per the OP original question above.

[jowey]

This is the right an clean solution if you want to enable it on every ng serve (and probably you want to in development)

[LuizLoyola]

Not the answer the OP needed, but thanks for adding it anyway. Works for ngrok tunneling without changing project settings.

[danday74]

a better solution

[JellicleCat]

Is there a way to configure this for the development environment only?

[ruwan800]

@JellicleCat Set "disableHostCheck": false under architect -> serve -> configurations -> production

[vanduc1102]

I am building a Shopify app, I have to run yarn start frontend --public-host=abc-xyz.ngrok.io , with this answer, i can just yarn start frontend . I think the issue should be fixed with disableHostCheck.