Yeoman生成的Angular 4应用在Hyperledger Composer中报错：Invalid Host header

这个问题我之前帮不少开发者处理过，本质是Angular CLI的默认安全防护机制在起作用——它会校验请求的Host头是否在允许列表内，防止DNS重绑定攻击。当你在云服务器上通过http://server-in-cloud:4200/访问时，因为主机名不是Angular默认信任的localhost或127.0.0.1，就触发了这个错误。下面给你几个实用的解决办法：

方法1：启动时禁用主机检查（快速测试用） #

如果你只是在测试阶段，想快速解决问题，可以在启动Angular应用时加上两个参数：

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

或者你习惯用npm脚本启动的话，打开项目根目录的package.json，把scripts里的start命令改成：

"start": "ng serve --host 0.0.0.0 --disable-host-check"

之后运行npm start就能正常访问了。注意：--disable-host-check会关闭主机头校验，生产环境不建议这么用，只适合测试场景。

方法2：配置允许的特定主机（更安全） #

如果想保留安全校验，只允许你的云服务器主机访问，可以修改Angular的配置文件：

• 如果你用的是Angular CLI 6+，打开angular.json，找到projects下你的项目名称，然后定位到architect -> serve -> options，添加allowedHosts配置：

"options": {
  "host": "0.0.0.0",
  "allowedHosts": ["server-in-cloud"]
}

• 如果你用的是旧版本（Angular 5及以下），修改.angular-cli.json，在defaults -> serve里添加allowedHosts：

"defaults": {
  "serve": {
    "host": "0.0.0.0",
    "allowedHosts": ["server-in-cloud"]
  }
}

修改完后重启Angular服务，就能正常访问了，这种方式比完全禁用检查更安全。

方法3：生产环境部署的正确姿势 #

如果是准备上线的生产环境，不要用ng serve运行应用，正确步骤是：

1. 先执行生产构建命令：

ng build --prod

2. 把生成的dist文件夹里的内容部署到静态服务器（比如Nginx、Apache）上。
3. 配置服务器的主机头规则，比如Nginx里在配置文件中设置：

server {
  listen 4200;
  server_name server-in-cloud;
  root /path/to/your/dist/folder;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

这样部署后就不会出现Host头错误，而且性能和安全性都更适合生产环境。

最后还要确认一下云服务器的安全组/防火墙已经开放了4200端口，允许外部流量访问，不然即使配置对了也可能访问不到。

内容的提问来源于stack exchange，提问作者David