我发现，我需要将devServer的公共属性设置为请求的主机值。因此，它将显示在该外部地址。

所以我需要在我的webpack.config.js中

devServer: {
  compress: true,
  public: 'store-client-nestroia1.c9users.io' // That solved it
}

另一个解决方案是在CLI中使用它:

webpack-dev-server --public $C9_HOSTNAME   <-- var for Cloud9 external IP

当使用webpack-dev-server时，将此配置添加到webpack配置文件中(您仍然可以将主机指定为0.0.0.0)。

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}

当发出HTTP请求时，默认情况下，浏览器/客户端包括“主机”(来自URL)作为原始HTTP请求头的一部分。作为额外的安全性/完整性检查的一部分(现在很常见)，Host头必须与HTTP服务器所期望的内容相匹配，以便服务器向您发送您所期望的内容。

默认情况下，Webpack Dev Server (WDS)只接受带有主机头的传入HTTP请求，该主机头与一些常见主机名(如localhost)匹配。当一个带有意外Host头的请求进入时，服务器仍然需要用一些东西来响应。因此，它尽其所能:发送一个带有标准HTTP错误代码的响应，并在HTML中发送一条人类可读的消息:“Invalid Host header”。

现在，至于如何解决这个问题，基本上有两个选择。告诉WDS接受更多(或全部)“Host”报头或修复与HTTP请求一起发送的Host报头。

配置Webpack

Generally, it's easier (and more correct) to tell the WDS configuration to allow more "Host"names to be used. By default, WDS only accepts connections from the local development machine and so, by default, only needs to support the hostname localhost. Most commonly this "Invalid Host header" issue comes up when trying to server to other clients on the network. After adding host: '0.0.0.0' to the devServer configuration, WDS needs to be told which names might be used by clients to talk to it. require('os').hostname() is usually (one of) the hostnames but other names could be just as valid. Because of this, WDS accepts a list of allowed names.

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      require('os').hostname(),
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com'
    ]
  }
};

然而，有时获得正确的列表是比它的价值更多的麻烦，它足够好，只是告诉WDS忽略Host头检查。在Webpack 4中，它是disableHostCheck选项。在Webpack 5中，allowwedhosts选项可以设置为单个字符串'all'(没有数组)。

创建React App (CRA)

流行的程序包create-react-app内部使用Webpack。CRA有一个额外的环境变量来覆盖这个特定的设置:DANGEROUSLY_DISABLE_HOST_CHECK=true。

发送不同的主机报头

如果改变Webpack的配置是不可能的，另一种解决方法是改变客户端的配置。

一个技巧是在客户机上使用hosts文件，以便所需的主机名映射到服务器的IP。

更常见的情况是反向代理位于WDS的前面。对于发送到后端(WDS)的请求，不同的代理具有不同的默认值。正如VivekDev的回答所建议的那样，您可能需要专门将Host头添加到后端请求中。

出现此问题是因为webpack-dev-server 2.4.4增加了主机检查。你可以通过添加到你的webpack配置来禁用它:

 devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it

 }      

请注意，此修复是不安全的。

请参阅安全解决方案的答案。

该选项在4.0.0版本中进行了重构。现在应该使用allowwedhosts选项:

devServer: {
  allowedHosts: "all"
}

这对我来说很管用:

在webpack.config.js中添加allowedHosts:

devServer: {
  compress: true,
  inline: true,
  port: '8080',
  allowedHosts: [
      '.amazonaws.com'
  ]
},

我不需要使用——host或——public参数。

我使用nginx运行在docker容器内部，根据url路由流量。

在nginx配置文件中添加以下两行代码，为我修复了“无效主机头”的错误。参见下面的配置文件(default.conf)。

proxy_set_header Host            $http_host;
proxy_set_header X-Forwarded-For $remote_addr;

首先，下面是我简单的两行Dockerfile来创建nginx容器，然后用路由配置它。

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf

因此，当构建映像时，default.conf文件被复制到nginx容器内的配置目录。

接下来，default.conf文件如下所示。

upstream ui {
    # The ui service below is a ui app running inside of a container. Inside of the container, the ui app is listening on port 3000. 
    server ui:3000;
}

upstream node-app {
    # The node-app service below is a server app running inside of a container. Inside of the container, the server is listening on port 8080. 
    server node-app:8080;
}

server {
    listen 80;

    location / {
        # The root path, with is '/' will routed to ui.
        proxy_pass http://ui;

        ################## HERE IS THE FIX ##################
        # Adding the following two lines of code finally made the error "Invalid Host header" go away.

        # The following two headers will pass the client ip address to the upstream server
        # See upstream ui at the very begining of this file.

        proxy_set_header Host            $http_host;
        proxy_set_header X-Forwarded-For $remote_addr;      
    }


    location /api {
        # Requests that have '/api' in the path are rounted to the express server.
        proxy_pass http://node-app;
    }
}
# 

最后，如果你想看一下我的docker compose文件，它有所有的服务(包括nginx)，在这里

version: '3'
services:
  # This is the nginx service. 
  proxy:
    build:
      # The proxy folder will have the Dockerfile and the default.conf file I mentioned above. 
      context: ./proxy 
    ports:
      - 7081:80

  redis-server:
    image: 'redis'

  node-app:
    restart: on-failure
    build: 
      context: ./globoappserver
    ports:
      - "9080:8080"     
    container_name: api-server

  ui:
    build:
      context: ./globo-react-app-ui
    environment:
        - CHOKIDAR_USEPOLLING=true      
    ports:
      - "7000:3000"
    stdin_open: true 
    volumes:
      - ./globo-react-app-ui:/usr/app

  postgres:
    image: postgres
    volumes:
      - postgres:/var/lib/postgresql/data
      - ./init-database.sql:/docker-entrypoint-initdb.d/init-database.sql
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password

volumes:
  postgres: