远程连接到 webpack-dev-server 时，我收到“无效的主机标头”消息

IT技术 javascript webpack webpack-dev-server
2021-02-27 23:00:33

我正在使用 Cloud9.io ubuntu VM Online IDE 作为环境，并且通过解决此错误已减少到仅使用 Webpack 开发服务器运行应用程序。

我启动它：

webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$IP 是具有主机地址的变量 $PORT 具有端口号。

我被指示在 Cloud 9 中部署应用程序时使用这些变量，因为它们具有默认 IP 和端口信息。

服务器启动并编译代码，没问题，但它没有向我显示索引文件。只有一个带有“无效主机标题”作为文本的空白屏幕。

这是请求：

GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

这是我的 package.json：

{
  "name": "workspace",
  "version": "0.0.0",
  "scripts": {
    "dev": "webpack -d --watch",
    "server": "webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT",
    "build": "webpack --config webpack.config.js"
  },
  "author": "Artur Vieira",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "file-loader": "^0.11.1",
    "node-fetch": "^1.6.3",
    "react": "^15.5.4",
    "react-bootstrap": "^0.30.9",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4",
    "whatwg-fetch": "^2.0.3"
  }
}

这是 webpack.config.js：

const path = require('path');

module.exports = {

  entry: ['whatwg-fetch', "./app/_app.jsx"], // string | object | array
  // Here the application starts executing
  // and webpack starts bundling
  output: {
    // options related to how webpack emits results

    path: path.resolve(__dirname, "./public"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js", // string
    // the filename template for entry chunks

    publicPath: "/public/", // string
    // the url to the output directory resolved relative to the HTML page
  },

  module: {
    // configuration regarding modules

    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "./app")
        ],
        exclude: [
          path.resolve(__dirname, "./node_modules")
        ],
        loader: "babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },

  devServer: {
    compress: true
  }
}

由于我的主机设置，Webpack 开发服务器正在返回此信息。在 webpack-dev-server/lib/Server.js 第 60 行。来自https://github.com/webpack/webpack-dev-server

我的问题是如何设置才能正确通过此检查。任何帮助将不胜感激。

6个回答

出现问题是因为webpack-dev-server2.4.4增加了主机检查。您可以通过将其添加到您的 webpack 配置来禁用它：

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

 }

编辑：请注意，此修复程序不安全。

请参阅以下安全解决方案的答案：https : //stackoverflow.com/a/43621275/5425585

如果您将 webpack 开发服务器用于本地开发以外的任何其他用途，则这是一个安全问题。
2021-05-05 23:00:33
单独的公共选项对我不起作用...... disableHostCheck 是唯一解决它的方法：\
2021-05-06 23:00:33
这对我也有用。我的情况是我正在使用 bitnami Multisite Worpdress 安装，服务于 192.168.0.106.xip.io。奇怪的是，我能够在没有这个“修复”的情况下在我的旧 Apache Linux 安装上工作就好了。直到我切换到 Bitnami 包后，这个问题才出现。
2021-05-06 23:00:33
这是一个安全问题。改用 public 选项来指定允许的主机名。有关更多信息，请参阅medium.com/webpack/...。
2021-05-11 23:00:33
@davidkomer 对我来说也是一样。唯一有效的是 disableHostCheck ...
2021-05-15 23:00:33

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

所以我在我的 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
2021 更新：public已重命名为host( Docs )。例如host: 'example.com'
2021-04-21 23:00:33
今天也刚遇到这个。看起来webpack-dev-server最近进行了此更改，需要正确的主机标头。有关更多信息，请参阅github.com/webpack/webpack-dev-server/releases/tag/v2.4.3。
2021-04-29 23:00:33
此更改也影响 webpack-dev-server 1.16.4。你可以阅读更多关于它在这里：medium.com/webpack/...。
2021-05-01 23:00:33
当我Invalid Host header在 vue cli 项目中遇到错误时，这也对我有用。
2021-05-04 23:00:33
嘿，我按照你说的做了，但我现在收到这个错误。stackoverflow.com/questions/65639318/... 有什么想法吗？
2021-05-12 23:00:33

这对我有用：

在 webpack.config.js 中的 devServer 下添加 allowedHosts：

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

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

如果您有 HotModuleReload，似乎publicparam 是设置用作目标的 URL 的原因（如果它无法从页面的服务方式中猜出它，对我来说它不能）。
2021-05-02 23:00:33

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

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}
这也适用于新的 Vue.js vue-cli 配置：github.com/vuejs/vue-cli/blob/dev/docs/config.md
2021-04-28 23:00:33

更安全的选择是将 allowedHosts 添加到您的 Webpack 配置中，如下所示： 

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

该数组包含所有允许的主机，您还可以指定子域。在这里查看更多

其它你可能感兴趣的问题
上一篇如何使用 jQuery 在页面加载时关注表单输入文本字段？ 下一篇每秒更新一次 React 组件