"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

it's the same as above... the same result – Olejs Apr 28 '17 at 10:54 — Olejs, Apr 28 '17 at 10:54

score 203 · Answer 1 · edited Oct 29 '17 at 14:32

203

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

edited Oct 29 '17 at 14:32

TT.

15,774
6
47
88

answered Jul 28 '17 at 19:43

Rodolfo Díaz

2,055
1
10
4

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` https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information. – Krishnadas PC Jul 24 '18 at 06:03
1

this option is not available anymore – edi Sep 28 '18 at 19:29
1

I confirm the `--disable-host-check` flag is working in Angular version 14 – arispen Oct 04 '22 at 07:55
1

@edi this is still relevant. – Coffee-Tea Oct 17 '22 at 14:06
@Coffee-Tea it seems that this option is available again: see [ng serve](https://angular.io/cli/serve) – edi Oct 18 '22 at 07:57

ruwan800 · Answer 2 · 2020-09-07T03:45:33.480

59

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

"disableHostCheck": true

Got the answer from this Github Issue Page

edited Sep 07 '20 at 03:45

answered Aug 12 '19 at 12:53

ruwan800

1,567
17
21

1

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. – Tom Doe Feb 04 '20 at 19:43
1

This is the right an clean solution if you want to enable it on every `ng serve` (and probably you want to in development) – jowey Apr 15 '20 at 10:06
2

Is there a way to configure this for the development environment only? – JellicleCat Apr 06 '21 at 04:54
4

@JellicleCat Set `"disableHostCheck": false` under **architect -> serve -> configurations -> production** – ruwan800 Apr 06 '21 at 06:33

score 40 · Answer 3 · edited Oct 29 '17 at 14:31

40

You need to specify the host

ng serve --port 8080 --host 123.34.56.78

edited Oct 29 '17 at 14:31

TT.

15,774
6
47
88

answered May 15 '17 at 12:44

Philip K. Adetiloye

3,102
4
37
63

score 30 · Answer 4 · edited Sep 11 '19 at 15:58

30

This works for me :

ngrok http --host-header=rewrite PORT

for instance :

ngrok http --host-header=rewrite 4200

edited Sep 11 '19 at 15:58

akmozo

9,829
3
28
44

answered Jan 11 '19 at 00:38

Nelson Cespedes

441
4
3

Not the answer the OP needed, but thanks for adding it anyway. Works for ngrok tunneling without changing project settings. – LuizLoyola Oct 29 '20 at 16:49
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`. – vanduc1102 Feb 15 '22 at 03:36

score 19 · Answer 5 · edited Oct 29 '17 at 14:31

19

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.

edited Oct 29 '17 at 14:31

TT.

15,774
6
47
88

answered Apr 30 '17 at 22:30

kegliz

323
1
3

29

You can run without edit code by append --disableHostCheck true ng serve --host 0.0.0.0 --port 8080 --disableHostCheck true – tarn Jul 17 '17 at 07:54
3

change the following line in node_modules/webpack-dev-server/lib/Server.js: if(this.disableHostCheck) return true; change to return true; – rakesh kashyap Sep 13 '17 at 06:50
[See this Angular CLI GitHub issue](https://github.com/angular/angular-cli/issues/6349) regarding disableHostCheck's potential risks, just to be aware of what you're doing. – jmq Jan 23 '18 at 19:02
Adetiloye's answer is much better – Matthew Dolman Jun 18 '18 at 08:30
4

Run ```ng serve --host 0.0.0.0 --disable-host-check``` – Ubaid Azad May 21 '19 at 08:32
modifying node_modules instead of using proper ng-cli parameters is absurdly bad practice – Cec Nov 14 '19 at 08:10

CookAtRice · Answer 6 · 2019-11-06T09:30:09.813

17

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

vi /etc/hosts

and add your host name last line.

127.0.0.1 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 0.0.0.0 --disableHostCheck true

Reconnecting to myHostName.com:4200 :)

edited Nov 06 '19 at 09:30

answered Aug 28 '18 at 02:50

CookAtRice

990
9
10

1

this is worked for me ng serve --host 0.0.0.0 --disableHostCheck true. thank you @CookAtRice – Vinay Pandya May 02 '19 at 08:43

score 16 · Answer 7 · edited May 22 '20 at 10:54

16

You need to run following:

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

Works for me.

edited May 22 '20 at 10:54

Nae

14,209
7
52
79

answered May 04 '17 at 09:32

Nitin .

808
9
12

ng serve --port 8080 --publicHost 0.0.0.0 – Nitin . Dec 18 '17 at 10:14

score 9 · Answer 8 · answered Aug 21 '17 at 06:08

9

Using the command below works for me.

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

answered Aug 21 '17 at 06:08

Devesh Vyas

131
1
6

1

It works. But where can I find out the explanation about the '--public' option online? I only found out the ['--public-host' option](https://github.com/angular/angular-cli/wiki/serve#options) – niaomingjian Oct 27 '17 at 02:55

score 7 · Answer 9 · answered Jun 07 '18 at 18:26

7

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

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

answered Jun 07 '18 at 18:26

Eastbrook

87
1
3

score 7 · Answer 10 · answered Jul 24 '18 at 06:49

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 0.0.0.0 --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.

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` — Cel, Oct 04 '18 at 06:46

score 6 · Answer 11 · answered Feb 22 '18 at 18:16

6

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 0.0.0.0 --port 8080 --disableHostCheck true

answered Feb 22 '18 at 18:16

Manish Bansal

2,400
2
21
37

score 6 · Answer 12 · edited Jan 06 '22 at 14:42

6

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

edited Jan 06 '22 at 14:42

Rafael Tavares

5,678
4
32
48

answered Jan 06 '22 at 14:38

MetaZebre

769
8
10

I don't think there is a difference between adding on development the `--disable-host-check` flag and using your line `ng serve --public-host my.dev.host.com` angular warns you that you are using `--disable-host-check` flag in both cases. You just need to add the conf in development – titusfx Jan 30 '23 at 12:07

scoochy · Answer 13 · 2022-03-19T15:32:07.547

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

https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a

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

Like:

"architect": {
  //...
  "serve": {
    //...
    "configurations": {
      //...
      "development": {
       //...
       "disableHostCheck": true
      }
    },
  },
  //...
}

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

score 5 · Answer 14 · answered Sep 25 '20 at 08:59

5

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

This works for me.

answered Sep 25 '20 at 08:59

Ethan Liew

91
1
3

score 4 · Answer 15 · answered Jun 16 '17 at 12:10

4

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

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

answered Jun 16 '17 at 12:10

Ben Hanna

129
3

score 3 · Answer 16 · answered May 26 '17 at 18:27

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 "0.0.0.0 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

score 2 · Answer 17 · answered Aug 24 '17 at 10:39

2

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

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

answered Aug 24 '17 at 10:39

LacOniC

824
12
21

score 1 · Answer 18 · answered Jun 07 '17 at 17:49

1

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

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

answered Jun 07 '17 at 17:49

Jason Spick

6,028
13
40
59

score 1 · Answer 19 · edited Mar 28 '18 at 10:45

1

Below both solutions will work. In command line :

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

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

edited Mar 28 '18 at 10:45

Antoine Thiry

2,362
4
28
42

answered Mar 28 '18 at 08:28

pa1 Raju

153
1
7

score 0 · Answer 20 · answered Aug 30 '17 at 10:40

0

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

ng serve --host 192.168.1.42

answered Aug 30 '17 at 10:40

MatiusDevelopment

21
4

score 0 · Answer 21 · answered Oct 29 '17 at 14:02

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 0.0.0.0 --port 3100 --public x.x.x.x

To know more, click here

score 0 · Answer 22 · answered Nov 14 '17 at 22:20

0

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.

answered Nov 14 '17 at 22:20

Mark Meuer

7,200
6
43
64

susheel · Answer 23 · 2017-11-21T07:49:35.990

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 0.0.0.0 --port YOURPORT --public YOURIP:YOURPORT"

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

score -1 · Answer 24 · answered Mar 09 '19 at 22:28

-1

Give this a shot

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

answered Mar 09 '19 at 22:28

marco

335
1
2
8

score -5 · Answer 25 · answered Jul 31 '18 at 04:56

-5

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;

answered Jul 31 '18 at 04:56

Avinash Kancharla

405
4
3

Add some more description. – Mathews Sunny Jul 31 '18 at 05:28
2

you should not be touching node vendors – Pablo W. Jul 03 '19 at 04:58

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

25 Answers25

Linked