17

I have an app in Angular v4 which have to change the scss dependong of the url of access. For example: if link in the browser is "example.com" then the app have background-color: black if the link is"example2.com" then the background-color: red

I have the next problem:

when I go to the hosts in C:\Windows\System32\drivers\etc and I set the next configuration in hosts 127.0.0.1 example.com 127.0.0.1 example2.com

then I run the app with "example.com:4200" the app doesn't run... the browser show me this message

"invalid host header"

How do I fix this problem?

Ploppy
  • 14,810
  • 6
  • 41
  • 58
Sergio Mendez
  • 1,311
  • 8
  • 33
  • 56

3 Answers3

30

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
Fredrik_Borgstrom
  • 2,504
  • 25
  • 32
  • This is absolutely not recommended for production deployments: https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck – Tena Mar 20 '19 at 16:14
  • 8
    The problem is related to the built-in server, hence it's an acceptable solution. Because the dev-server itself is already not recommended for production deployments, so that recommendation supersedes the recommendation to not use disableHostCheck in the dev-server. And as you can see in Sergio's description, the question applies to running under localhost. – Fredrik_Borgstrom Mar 21 '19 at 13:48
19

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.

Krishna
  • 5,194
  • 2
  • 28
  • 33
1

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:

Hero Wanders
  • 3,237
  • 1
  • 10
  • 14
  • 1
    I encountered this problem when attempting to run an angular 7 app inside of an iFrame. When I added a redirect (using Fiddler HOSTS override) I started getting an "invalid host header". I went into the angular.json file and under serve.options added a field "disableHostCheck" and set it to true (note that there is intellinsense if you are using VS code ;) ). Once I did that I had to stop the app then once I restarted it it worked wonderfully. – Nick Oct 27 '18 at 03:44