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

当你在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'
   ]
  }

更多信息:官方文件

我刚刚在使用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

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

React开发者们好!

而不是这样做 在webpackDevServer.config.js中disableHostCheck: true。你可以通过添加一个。env文件到你的项目中，在。env文件中添加变量host =0.0.0.0和DANGEROUSLY_DISABLE_HOST_CHECK=true来轻松解决“无效主机头”错误。如果你想改变webpackDevServer.config.js，你需要使用'npm run eject'来提取反应脚本，不建议这样做。因此，更好的解决方案是在项目的.env文件中添加上述变量。

快乐编码:)

当使用webpack 5的默认行为(没有配置文件)时，这篇文章:[https://stackoverflow.com/a/65268634/2544762 ']

"scripts": {
    "dev": "webpack serve --mode development --env development --hot --port 3000"
    ...
    ...
},
"devDependencies": {
    ...
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0"
},

使用webpack 5帮助webpack服务——帮助:

Usage: webpack serve|server|s [entries...] [options]

Run the webpack dev server.

Options:
  -c, --config <value...>     Provide path to a webpack configuration file e.g.
                              ./webpack.config.js.
  --config-name <value...>    Name of the configuration to use.
  -m, --merge                 Merge two or more configurations using
                              'webpack-merge'.
  --env <value...>            Environment passed to the configuration when it
                              is a function.
  --node-env <value>          Sets process.env.NODE_ENV to the specified value.
  --progress [value]          Print compilation progress during build.
  -j, --json [value]          Prints result as JSON or store it in a file.
  -d, --devtool <value>       Determine source maps to use.
  --no-devtool                Do not generate source maps.
  --entry <value...>          The entry point(s) of your application e.g.
                              ./src/main.js.
  --mode <value>              Defines the mode to pass to webpack.
  --name <value>              Name of the configuration. Used when loading
                              multiple configurations.
  -o, --output-path <value>   Output location of the file generated by webpack
                              e.g. ./dist/.
  --stats [value]             It instructs webpack on how to treat the stats
                              e.g. verbose.
  --no-stats                  Disable stats output.
  -t, --target <value...>     Sets the build target e.g. node.
  --no-target                 Negative 'target' option.
  --watch-options-stdin       Stop watching when stdin stream has ended.
  --no-watch-options-stdin    Do not stop watching when stdin stream has ended.
  --bonjour                   Broadcasts the server via ZeroConf networking on
                              start
  --lazy                      Lazy
  --liveReload                Enables/Disables live reloading on changing files
  --serveIndex                Enables/Disables serveIndex middleware
  --inline                    Inline mode (set to false to disable including
                              client scripts like livereload)
  --profile                   Print compilation profile data for progress steps
  --progress                  Print compilation progress in percentage
  --hot-only                  Do not refresh page if HMR fails
  --stdin                     close when stdin ends
  --open [value]              Open the default browser, or optionally specify a
                              browser name
  --useLocalIp                Open default browser with local IP
  --open-page <value>         Open default browser with the specified page
  --client-log-level <value>  Log level in the browser (trace, debug, info,
                              warn, error or silent)
  --https                     HTTPS
  --http2                     HTTP/2, must be used with HTTPS
  --key <value>               Path to a SSL key.
  --cert <value>              Path to a SSL certificate.
  --cacert <value>            Path to a SSL CA certificate.
  --pfx <value>               Path to a SSL pfx file.
  --pfx-passphrase <value>    Passphrase for pfx file.
  --content-base <value>      A directory or URL to serve HTML content from.
  --watch-content-base        Enable live-reloading of the content-base.
  --history-api-fallback      Fallback to /index.html for Single Page
                              Applications.
  --compress                  Enable gzip compression
  --port <value>              The port
  --disable-host-check        Will not check the host
  --socket <value>            Socket to listen
  --public <value>            The public hostname/ip address of the server
  --host <value>              The hostname/ip address the server will bind to
  --allowed-hosts <value...>  A list of hosts that are allowed to access the
                              dev server, separated by spaces

Global options:
  --color                     Enable colors on console.
  --no-color                  Disable colors on console.
  -v, --version               Output the version number of 'webpack',
                              'webpack-cli' and 'webpack-dev-server' and
                              commands.
  -h, --help [verbose]        Display help for commands and options.

To see list of all supported commands and options run 'webpack --help=verbose'.

Webpack documentation: https://webpack.js.org/.
CLI documentation: https://webpack.js.org/api/cli/.
Made with ♥ by the webpack team.
Done in 0.44s.

解决方案

所以，只需添加——disable-host-check和webpack serve命令就可以了。

我通过在nginx配置中添加主机头的代理来解决这个问题，就像这样:

server {
    listen 80;
    server_name     localhost:3000;

    location / {
        proxy_pass http://myservice:8080/;

        proxy_set_header HOST $host;
        proxy_set_header Referer $http_referer;
    }
}

我补充说:

proxy_set_header主机

$http_referer;