尝试在webpack.config.js文件中添加以下内容。这对我很管用。

devServer: {
    allowedHosts: [yourhostname.com]
}

当发出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头添加到后端请求中。

这可能发生在两种情况下:

当你在cloud-9或任何其他在线IDE中运行webpack-dev-server时。 当你想在移动设备上运行开发模式或通过本地主机的公共URL与他人快速共享web应用程序时(例如使用ngrok)。出于安全考虑，您不能从外部访问您的webpack-dev-server。

你可以通过以下方式实现这一点:

devServer: {
    allowedHosts: 'auto' | 'all' | Array[string]
}

如果您不考虑安全性，您可以将allowedHosts设置为“all”。(不过不推荐) 如果使用some-host-url设置url为公共url，可以执行以下操作:

devServer: {
 allowedHosts: [
  'host.com',
  'subdomain.host.com'
   ]
  }

更多信息:官方文件

在包中。json，在“脚本”，添加参数——disableHostCheck=true 如:

"scripts": {
        "start": "ng serve --host=0.0.0.0 --configuration=dev --disableHostCheck=true"
}

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

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

我使用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: