Repository navigation
Invalid Host header after updating to 1.0.1 #6070
Description
- [x ] bug report -> please search issues before submitting
- [ ] feature request
Versions.
1.0.1
Repro steps.
update to 1.0.1
ng serve
browser will read: Invalid Host header, and do nothing
The log given by the failure.
none
Desired functionality.
serve my application.
Mention any other details that might be useful.
Downgrading to 1.0.0 fixed the issue. (BTW, running on ubuntu and debian, same issue)
Activity
MichalBu commentedon Apr 25, 2017
same here, runs on debian
AlanCrevon commentedon Apr 25, 2017
same here on OSX.
kolkov commentedon Apr 25, 2017
Maybe it related to?
webpack/webpack-dev-server#882
amiram commentedon Apr 25, 2017
It's indeed due to a security fix added lately to webpack-dev-server. You must start with
ng serve --host your.ip.addr.essSanderElias commentedon Apr 25, 2017
@amiram I had to add some trickery to my hosts file, and serve from a name, but it is indeed the curlpit.
Closing as it's not a CLI issue!
amiram commentedon Apr 25, 2017
@SanderElias there is a new option in webpack disableHostCheck that will also solve it. Can I set it if I'm using angular cli?
SanderElias commentedon Apr 25, 2017
@amiram Nope, it's not exported to cmd-line yet afaik. Seems even impossible from webpack cmd-line itself for now.
flackjap commentedon Apr 26, 2017
In the details of this Webpack security update, there's an important note:
It means what it means. If you were using just a webpack-dev-server and localhost hostname or 127.0.0.1 to develop/test an app in your browser, you should be fine.
But if you were using it behind a hostname (e.g. myapp.com) while the NG CLI or Webpack dev server served your app from the default address, and you proxied requests to it from, let's say, Nginx, then the whole HTTP header forwarding path must be matched. I left an example in the previously linked issue - webpack/webpack-dev-server#882 (comment)
dinvlad commentedon Apr 27, 2017
Seems like specifying
--public <hostname>option forwebpack-dev-serverworks for people behind proxies. Would it be possible to add it tong serve?vivekamin commentedon Apr 28, 2017
I have multitenant system .SO in 1.0.0 version when I was adding subdomain It was working. But now It is giving me Invalid host header.
localhost(success)
asd.localhost(Invalid host header)
How to allow any subdomain?
SanderElias commentedon Apr 28, 2017
@vivekamin edit your hosts file is the easiest. The dev server is not meant to be used in production. This a secutiry measure taken by the webpack team. There is little no nothing the CLI team can do, execpt from exposing the switched spoken about above!
vivekamin commentedon Apr 28, 2017
@SanderElias which hosts file? Can you please elaborate. Is it nginx hosts files? How to do It in development environment ?
dinvlad commentedon Apr 28, 2017
/etc/hostsif you're on Linux. That's inconvenient though, if the host is always migrating, like in some cloud environments.. Besides, there could be DNS complications depending on the network setup.Adding
--publicseems like a better option - no hosts need to be edited, and security is uncompromised.AaronLangley commentedon Apr 28, 2017
This is a problem for me too. I use two separate IDEs and applications, one for Angular and one for the web services. The Angular app will deploy to S3 and the services to Elastic Beanstalk, and I simulate this locally with myapp.lvh.me:4200 and myservices.lvh.me:4300 was working great until I upgraded to Angular 4 and latest angular-cli
44 remaining items
flackjap commentedon Aug 22, 2017
@rahianeja This issue has been solved and closed. #6173
Why don't you just use --disable-host-check ?
If you still have to use the older version, then change the disableHostCheck to false, in webpackDevServer config file.
jrohatiner commentedon Aug 24, 2017
solution for me in cloud9:
open node_modules/webpack-dev-server/lib server.js
edit line 451 change false to true
edit line 473 change false to true
this allows "public host name" of listening address and the allowedHost === hostname
must accept that public hostname and allowedHost are exactly ===
dinvlad commentedon Aug 25, 2017
@jrohatiner no need for that, I use mine in Cloud9 too without any modifications to the source code. Just use
--public-hostparameter.kimfrithiof commentedon Oct 4, 2017
@rahianeja @flackjap Did you manage to solve your problem? I'm having the same thing. I can access my app with the --disable-host-check from the internet but I get the "Error: Could not connect to REST server. Please check your configuration details". It works locally with no issues.
flackjap commentedon Oct 6, 2017
Where do you get that error from? Angular CLI? Browser? Something else?
kimfrithiof commentedon Oct 6, 2017
@flackjap Sorry for being unspecific. I'm following the tutorial to setup a hyperledger app over here. Part of that is generating a REST server and an Angular Skeleton application with Yeoman ontop. I have addedd the --disable-host-check which solves the problem of "Invalid host header" but I'm now running in to an error in the browser when I try to interact with the REST API from the app. The rest API works by itself and the interaction works when I use it on the local machine (localhost:4200).
kimfrithiof commentedon Oct 10, 2017
@flackjap @rahianeja I solved it. Was an easy fix. I needed to edit the file: my-app/src/app/configuration.ts. The line
public ApiIP: string = "localhost";Change that to your external IP.
kiwi-koder commentedon Oct 12, 2017
@kimfrithiof I am having the same issue as you however changing the line
public ApiIP: string = "localhost";to my external IP still did not work. The error reappeared when I went to post the asset
flackjap commentedon Oct 16, 2017
I don't know what you guys are trying to do, but it seems that it has nothing to do with Angular CLI.
You have some API routing problems as I can see, and you are probably just trying to hit the same URL where you got your Angular app served, which, obviously can't handle your API requests as it's not supposed to.
99sono commentedon Dec 3, 2017
This situation has happened to me while trying to have a docker apache httpd work as a reverse proxy to my localhost nodejs .
The message popped up in my browser saying that the hostname was invalid, but not clarifying what hostname was being used.
After modefying the Server.js to do a console.log of the invalid name it was clear that the invalid name was:
webpack: Compiled successfully.
hostname being rejeted is: docker.for.mac.localhost
A hurdle for development.
Normally, this situation would not apply on a productive environment, since every code may be running on a container with a proper hostname.
But when in your local development machine you might want to run some code from your main HOST OS - you may end up with docker machines being allowed to connect to your main operating system. In Mac you get that very convenient hostname for this effect.
I am going to modify the
if(hostname === "127.0.0.1" || hostname === "localhost") return true;
To contain the docker Mac localhost.
feat(@angular/cli): add host check flags to ng serve
toanhd commentedon Nov 18, 2018
this saved me after many hours of surfing for the solution
angular-automatic-lock-bot commentedon Sep 9, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
feat(@angular/cli): add host check flags to ng serve