我发现，我需要将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 2.4.4增加了主机检查。你可以通过添加到你的webpack配置来禁用它:

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

 }      

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

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

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

devServer: {
  allowedHosts: "all"
}

如果您正在C9上使用create-react-app，只需运行此命令启动

npm run start --public $C9_HOSTNAME

不管你的主机名是什么(例如在终端输入$C_HOSTNAME来获得主机名)

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

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

这对我来说很管用:

在webpack.config.js中添加allowedHosts:

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

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

更安全的选择是在你的Webpack配置中添加allowwedhosts，如下所示:

module.exports = {
devServer: {
 allowedHosts: [
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  'host2.com'
   ]
  }
};

数组包含所有允许的主机，还可以指定子域名。点击这里查看更多信息

如果你还没有从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配置文件，更简单的禁用主机检查的方法是通过添加一个.env文件到你的根文件夹，并放入:

DANGEROUSLY_DISABLE_HOST_CHECK=true

顾名思义，禁用它是不安全的，建议只在开发环境中使用。

如果你在一个容器中运行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发出请求。

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文件中添加上述变量。

快乐编码:)

我刚刚在使用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配置中添加主机头的代理来解决这个问题，就像这样:

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;

因为webpack-dev-server 4你需要添加这个到你的配置:

devServer: {
  firewall: false,
}

当使用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运行在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:

vue-cli用户注意事项:

将vue.config.js文件放在根目录下，使用相同的代码行:

module.exports = {
  configureWebpack: {
    devServer: {
      public: '0.0.0.0:8080',
      host: '0.0.0.0',
      disableHostCheck: true,
    }
  }
};

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

2021年使用webpack-dev-server v4+的人，

allowedHosts和disableHostsCheck被移除，取而代之的是allowedHosts: 'all'

要摆脱这个错误，将你的devServer更改为:

devServer: {
  compress: true,
  allowedHosts: 'all'
}

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

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

更多信息:官方文件

我尝试了上面的建议，但下面的解决方案并不适合我:

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

下面的解决方案适合我:

devServer: {
    disableHostCheck: true
}

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

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

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

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

因为我用npm start启动服务器，我需要改变包。Json格式如下:

"scripts": {
  "start": "webpack-dev-server --progress --disableHostCheck"
},

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

devServer: {
    allowedHosts: [yourhostname.com]
}