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

AngularAngular Clic9.io

Angular Problem Overview

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

Results on my website:

>Invalid Host header

Angular Solutions

Solution 1 - Angular

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 - Angular

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

"disableHostCheck": true

Got the answer from this Github Issue Page

Solution 3 - Angular

You need to specify the host

ng serve --port 8080 --host

Solution 4 - Angular

This works for me :

ngrok http --host-header=rewrite PORT

for instance :

ngrok http --host-header=rewrite 4200

Solution 5 - Angular

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 > Now works fine.

Solution 6 - Angular

In my case, I use my host name to update /etc/hosts file.

vi /etc/hosts

and add your host name last line. myHostName.com

to connect my server,

ng serve -o

An error occurred when connecting to myHostName.com:4200.

so, I did like this,

ng serve --host --disableHostCheck true

Reconnecting to myHostName.com:4200 :)

Solution 7 - Angular

You need to run following:

ng serve --port 8080 --publicHost // your server ip or host name.

Works for me.

Solution 8 - Angular

Using the command below works for me.

ng serve --host --port 8080  --public ipAddress

Solution 9 - Angular

Use the command below works for me for Angular CLI: 6.0.7

ng serve --host --port 8080 --disableHostCheck

Solution 10 - Angular

> ng serve --host --port 1234 --public-host mydomain.com

This works for me.

Solution 11 - Angular

I was facing same error after deploying my angular app on AWS EC2 instance having bitnami image. Then i launched my app with below command and it worked fine.

ng serve --host --port 8080 --disableHostCheck true

Solution 12 - Angular

Tested on the below version of Angular and server Amazon.

Angular CLI: 6.0.8
Node: 8.11.3
OS: linux x64
Angular: 5.2.8

ng command options has been changed, now use configuration instead of env. The command which worked for me is

 ng serve --configuration=dev  --port 4009 --host --publicHost myhost.com

Never use --disable-host-check on a public server. Angular will warn you if you use this. It may work but it is a serious security issue. You will get this message if you use that flag.

> WARNING: Running a server with --disable-host-check is a security > risk. See > https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a > for more information.

Please take some time to read that article it is worth reading.

Solution 13 - Angular

Using the command below with the latest version of Angular CLI works for me.

ng serve --host --public-host <workspace>-<username>.c9users.io

Solution 14 - Angular

This was actually solved in one of the youtube video comments thanks to Mateusz Sawa

Go here to check it out.

-- specifyng a host in package.json does not work anymore --

just to note that it is not necessary to use the command that was used in the video, bellow instructions are enough to make the app work using regular angular-cli development

first you need to find the hosts in the etc/ folder

type cd .. in the console until you reach the root of the linux machine and check always with ls what is listed

if you see the hosts file, than you are in the right location and then use sudo vi hosts to edit it

add the line bellow all ip addresses " yourworkspace-yourusername.c9users.io" (without quotes of course :-) )

also in package.json change "start": "ng serve -H yourworkspace-yourusername.c9users.io"

then you just need to go to the application folder and start the app in the terminal with npm start

checked it just now and it worked

Solution 15 - Angular

Please, don't use the --disable-host-check flag for a development server!

This is a major security issue: some malicious code can request your development server on your behalf and get the response. The problem is that the development server also sends the source code of your application, so basically, you give access to the code of the application you are building if you use that flag.

Try this instead:

ng serve --public-host my.dev.host.com

More detailed information here: webpack-dev-server/middleware security issues

Solution 16 - Angular

Refer to: https://github.com/angular/angular-cli/issues/6070

use the public flag. for example: ng serve --host <workspace>-<username>.c9users.io --public

Solution 17 - Angular

I got same error. Public option solved problem for me like below:

ng serve --host --port 8080 --live-reload-port 8081 --public $C9_HOSTNAME

Solution 18 - Angular

Below both solutions will work. In command line :

ng serve --public --host yourip --port yourportnumber

ng serve --host --port yourport --disableHostCheck true

Solution 19 - Angular

In addition to @ruwan800's answer, it's best to have host checking enabled at all times. This prevents attacks using DNS Rebinding.


To fix your issue, check if you have full access to your host IP. That's a likely cause.

If that doesn't solve your issue, then at your own risk, you can disable host check in your angular config. I'll advise you to do this for only your local machine though.

If you choose to do so, just set disable host check to true under your dev config in your angular.json.
That is, under architect -> serve -> configurations -> development, set disableHostCheck: true


"architect": {
  "serve": {
    "configurations": {
      "development": {
       "disableHostCheck": true

This way, it only disables when running in dev mode, not when deployed on your server.

Solution 20 - Angular

You should just change to your local IP address like and it should work.

ng serve --host

Solution 21 - Angular

The thing is you can only access to link you have specified in --public parameter. In my case, I have provided the IP address in --public and trying to access it with the domain I registered against that IP. But ng binds it for the only host provided in --public.

To solve this problem, I supplied one more parameter: disable-host-check. Complete command: ng serve --disable-host-check --host --port 3100 --public x.x.x.x

To know more, click here

Solution 22 - Angular

I was getting this error when trying to access our app using the localtunnel utility.

@tarn 's suggestion (from a comment on the accepted answer) of adding --disableHostCheck true to the ng serve command did the trick.

Solution 23 - Angular

Here is solution if anybody still stuck in invalid host header issue:

Run ng eject it will create the webpack.config.js. Run npm install if it is asking. Add below "disableHostCheck":true to devServer in webpack.config.js. Like below:

"devServer": {
    "historyApiFallback": true,
    "disableHostCheck" : true //<-- add this line

Then in package.json file change start option under ng like this

"start": "webpack-dev-server --host --port YOURPORT --public YOURIP:YOURPORT"

Now run the angular with npm start command. Thats it.

Solution 24 - Angular

Give this a shot

ng serve --host <private IP> --port <host port> --public-host <public IP>

Solution 25 - Angular

Change the line 425 in file "node_modules/webpack-dev-server/lib/Server.js" from false to true. i.e,

Before: return false;

Updated: return true;


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOlejsView Question on Stackoverflow
Solution 1 - AngularRodolfo DíazView Answer on Stackoverflow
Solution 2 - Angularruwan800View Answer on Stackoverflow
Solution 3 - AngularAdetiloye Philip KehindeView Answer on Stackoverflow
Solution 4 - AngularNelson CespedesView Answer on Stackoverflow
Solution 5 - AngularkeglizView Answer on Stackoverflow
Solution 6 - AngularCookAtRiceView Answer on Stackoverflow
Solution 7 - AngularNitin .View Answer on Stackoverflow
Solution 8 - AngularDevesh VyasView Answer on Stackoverflow
Solution 9 - AngularEastbrookView Answer on Stackoverflow
Solution 10 - AngularEthan LiewView Answer on Stackoverflow
Solution 11 - AngularManish BansalView Answer on Stackoverflow
Solution 12 - AngularKrishnadas PCView Answer on Stackoverflow
Solution 13 - AngularBen HannaView Answer on Stackoverflow
Solution 14 - AngularVlastimir RadojevicView Answer on Stackoverflow
Solution 15 - AngularMetaZebreView Answer on Stackoverflow
Solution 16 - AngularJason SpickView Answer on Stackoverflow
Solution 17 - AngularLacOniCView Answer on Stackoverflow
Solution 18 - Angularpa1 RajuView Answer on Stackoverflow
Solution 19 - AngularscoochyView Answer on Stackoverflow
Solution 20 - AngularMatiusDevelopmentView Answer on Stackoverflow
Solution 21 - AngularshubhamView Answer on Stackoverflow
Solution 22 - AngularMark MeuerView Answer on Stackoverflow
Solution 23 - AngularsusheelView Answer on Stackoverflow
Solution 24 - AngularmarcoView Answer on Stackoverflow
Solution 25 - AngularAvinash Kancharla View Answer on Stackoverflow