Fix "invalid host header" in Angular

This appeared for me under angular 7.2.1

Assuming you're using the Angular CLI, the solution was to add the following line in angular.json under architect>serve>options:

"disableHostCheck": true

The Reason -

Most development-oriented application servers (such as ng, webpack-dev-server, or WAMPP) default to only binding to localhost (or in some cases blocking traffic directly). Essentially, only traffic directed to your machine from itself is allowed to pass through, meaning that traffic passing through the tunnel will not work the same as traffic coming from your machine directly. Even though it works on your machine, the way the server is set up makes it so that even other local machines cannot connect to it.

How do I fix it?

In most cases, the fix is to tell the server to restart and allow connections from outside localhost.

1. ng (Angular) => Kill the server and restart it, adding

   --host 0.0.0.0 --disableHostCheck true 
   

   to the command.

2. Angular2 => Same as above, but add

   --host 0.0.0.0  --disable-host-check
   

   instead

3. webpack-dev-server => Kill the server and restart it, adding

   --host 0.0.0.0
   

   to the command.

--disable-host-check is sometimes needed here as well.

You are probably using the webpack dev server. It has options to set in webpack.config.js within devServer:

• host
• allowedHosts
• disableHostCheck

Perhaps one of those works for you?

Sources:

• I am getting an "Invalid Host header" message, when running my React app in a Webpack dev server on Cloud9.io
• https://webpack.js.org/configuration/dev-server/