我刚刚在使用Windows子系统for Linux (WSL2)时遇到了这个问题，所以我也将分享这个解决方案。

我的目标是在wsl:3000和localhost:3000中呈现webpack的输出，从而创建一个备用的本地端点。

如您所料，这最初会导致出现“无效主机头”错误。似乎没有什么帮助，直到我添加了如下所示的devServer配置选项。

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['http://wsl:3000'],
        target: 'http://localhost:3000',
      },
    ],
  },
}

这在不引入任何安全风险的情况下修复了“错误”。

参考资料:webpack DevServer docs

如果你还没有从CRA中弹出，你不能轻易地修改你的webpack配置。配置文件隐藏在node_modules/react_scripts/config/webpackDevServer.config.js中。不建议您更改该配置。

相反，你可以将环境变量DANGEROUSLY_DISABLE_HOST_CHECK设置为true来禁用主机检查:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

对于webpack-dev-server 4.7，您可以使用——allowed-hosts all

npx webpack serve --open --allowed-hosts all

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

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

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

如果你在一个容器中运行webpack-dev-server，并通过它的容器名向它发送请求，你会得到这个错误。要允许来自同一网络上其他容器的请求，只需使用——public选项提供容器名(或用于解析容器的任何名称)。这比完全禁用安全检查要好。

在我的例子中，我在名为assets的容器中运行webpack-dev-server，使用docker-compose。我把开始命令改为这样:

webpack-dev-server --mode development --host 0.0.0.0 --public assets

另一个容器现在可以通过http://assets:5000发出请求。