Solvedangular cli Allowing different HOST headers to be used in ng serve

Bug Report or Feature Request (mark with an x)

- [   ] bug report -> please search issues before submitting
- [ x ] feature request

Allow ng serve to accept requests with host headers that are different to the --host setting. This is needed when accessing the server via a reverse proxy.

Versions.

@angular/cli: 1.0.3
node: 6.10.1
os: linux x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

Linux Ubuntu 16.04.2 LTS

Repro steps.

ng new my-dream-app
cd my-dream-app/
ng serve

Configure reverse proxy (Apache/Nginx/HAProxy etc)
e.g. http://myapp.example.com reverse proxies to http://localhost:4200

Browse to http://myapp.example.com

Resulting page displays:
Invalid Host Header

The log given by the failure.

No error log is produced

Desired functionality.

I would like to see a command-line option that specifies a list of allowed HOST: header values.

Mention any other details that might be useful.

It is possible to work around this problem by editing the hosts file on your OS so that myapp.example.com points to an IP address that the server is listening on. This way, the 'expected' HOST: header is correct and ng serve is listening on the correct IP address.
However this is not an ideal solution as it requires editing the system-wide hosts file. This may not always be possible or desirable. It is common to allow for different HOST: headers to be used in server applications (e.g. Apache, Nginx etc) for virtual hosting.
I understand that ng serve is not meant for production purposes, so virtual hosting does not need to be a consideration, but sometimes developers also need to use a reverse proxy when working remotely rather than on their local machine (e.g. local machine is Windows and you don't want to run node locally).

After researching this issue more, I found that --host 0.0.0.0 was a common solution to this problem but no longer works due to a regression introduced in 1.0.1. due to stricter host name checking in WebPack. I see other issues related to it ( #6070 ), but they talk about disabling host checking (bad) or configuring public hosts (Using --public in webpack-dev-server or --piblic-host in angular-cli v1.1.0.beta.1 or newer.)

I tried installing Angular-cli 1.1.0-rc.0 and using --public-host http://public.host.com and --host 0.0.0.0 or --host <local IP Addr> but it still returns the Invalid Host header error when I browse to http://public.host.com

In one of the many threads I have read on this in the last few days, someone mentioned that Django has a configuration to allow multiple hosts and indeed it does. But it's done as a part of the configuration of the app by definign an array of allowed hosts. Can something like this be done?

@ryanper in that example, you have the same IP address used for --host and --public-host? If that's the case, then this is not the scenario I am talking about.

The scenario I am talking about is this:

ng serve --host local-ip-address --public-host http://public-ip-address-or-dns

Where local-ip-address is on a private network and not accessibly directly from the web and you have a reverse proxy that maps the public ip to the local one. In the above instance, you only get Invalid Host header unless you add --disable-host-check also.

In this scenario, running the following

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

will load the page, but the websocket for live updates will not connect as it tries to use http://localhost:4200 which is obviously not accessible from the net :)

Opps sorry @Tommyf you did mention v1.1.0-rc.0 my bad.

With regard to the full url, these combination of parameters worked for me
a) "ng serve --host host-ip-address --public-host http://host-ip-address" ( had to add http:// )
b) "ng serve --host 0.0.0.0 --disable-host-check",

I am happy with the --disable-host-check flag for local development, but I can appreciate the need to secure it in larger development teams where a proper web server would most likely be used as clydin suggested.

The --public-host option expects a hostname. The use of a URL was most likely the cause of the issue observed.
Until webpack-dev-server adds support for configuring multiple hosts, there's not much that can done on that front, unfortunately.
Realistically, ng serve is meant to be a basic development server. If a development setup requires a more exotic configuration, a custom server used in combination with ng build --watch may be more appropriate.
Also, there's nothing inherently bad about --disable-host-check. It's a tool that can be quite useful if used appropriately. Regardless of the use of the option, ng serve is not intended to be publicly accessible.

this works like a charm:
ng serve --host 207.68.230.134 --disable-host-check

Can you tell me what is this about?

When I run
ng serve --host 0.0.0.0 --disable-host-check

The option '--disable-host-check' is not registered with the serve command. Run `ng serve --help` for a list of supported options. appears. And it gives that same Invalid Host header. I tried to update package.json from 4.1.1 everything to 4.1.2 and hit npm i and the same "is not registered" comes just like before.

I have these installed globally:

/usr/lib
├── @angular/cli@1.0.3
├── http-server@0.10.0
├── loopback-cli@2.5.0
├── npm@4.2.0
├── pm2@2.4.6
└── typings@2.1.1