当我远程连接webpack-dev-server时，出现了“Invalid Host header”错误信息。

Question

当我远程连接webpack-dev-server时，出现了“Invalid Host header”错误信息。

288

我使用Cloud9.io Ubuntu VM在线IDE作为环境，我已经将解决此错误的步骤简化为仅使用Webpack dev服务器运行应用程序。

我使用以下命令启动它：

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

$IP是一个变量，代表主机地址 $PORT是端口号。

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

服务器启动并编译代码，没有问题，但它并没有向我显示索引文件。只有一个带有“Invalid Host header”文本的空白屏幕。

这是请求：

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

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

- Artur Vieira

似乎问题超出了注释范围。 - elmeister

我不明白问题是如何发生的。你能指导我正确的方向吗？ - Artur Vieira

这是我在RedwoodJS中的解决方案：https://github.com/redwoodjs/redwood/issues/534#issuecomment-821832435 - Ryan

2021年更新：请指定host选项（文档）。例如：devServer: { host: 'example.com', ... }。 - rinogo

25个回答

161

我发现需要将 devServer 的 public 属性设置为请求的主机值，以便在外部地址上显示。

因此，我需要在我的 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

- Artur Vieira

5

今天我也遇到了这个问题。似乎 webpack-dev-server 最近进行了更改，需要正确的主机头。详情请参见 https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3。 - Kaitrono

2

该更改也影响了webpack-dev-server 1.16.4版本。您可以在此处阅读更多信息：https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a。 - Tyler Collier

2

当我在一个vue cli项目中遇到“Invalid Host header”错误时，这个方法对我也起了作用。 - Timmy Von Heiss

嘿，我按照你说的做了，但现在出现了这个错误。https://stackoverflow.com/questions/65639318/syntaxerror-unexpected-strict-mode-reserved-word-when-editing-my-reactjs-webp 有什么想法吗？ - S1534

8

2021 年更新：public 已更名为 host（文档）。例如，host: 'example.com'。 - rinogo

74

以下是对我有效的做法:

在你的webpack.config.js中，在devServer下添加allowedHosts:

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

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

- irl_irl

如果您使用了HotModuleReload，似乎“public”参数是设置用作目标URL的参数（如果无法从页面的服务方式中猜测出来，对我而言是这样的）。 - Tom Saleeba

如果您使用像ngrok或localtunnel这样的工具，那么这将非常有效。 - minimalpop

25

不必编辑webpack配置文件，更容易禁用主机检查的方法是在根目录下添加一个.env文件，并将以下内容放入其中:

DANGEROUSLY_DISABLE_HOST_CHECK=true

如变量名称所示，禁用它是不安全的，仅建议仅在开发环境中使用。

- Kyle Ordona

17

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

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

- Sampath

2

这对于新的Vue.js vue-cli配置也适用：https://github.com/vuejs/vue-cli/blob/dev/docs/config.md - CenterOrbit

17

更安全的选择是像这样将allowedHosts添加到您的Webpack配置中：

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

数组包含所有允许的主机，您也可以指定子域。

查看更多信息

- AV Paul

14

如果您尚未从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

- Lukas Kalbertodt

3

谢谢，Lukas Kalbertodt，最佳答案。我使用了： export DANGEROUSLY_DISABLE_HOST_CHECK=true; npm start - Mark Kahn

7

在 package.json 上的 "scripts" 中，添加参数 --disableHostCheck=true。

例如：

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

- DEV Tiago França

6

如果你在容器中运行webpack-dev-server，并且通过容器名发送请求，则会出现此错误。为了允许来自同一网络的其他容器发出请求，只需使用--public选项提供容器名称（或用于解析容器的任何名称）。这比完全禁用安全检查更好。

在我的情况下，我使用docker-compose在名为assets的容器中运行webpack-dev-server。我将启动命令更改为以下内容：

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

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

- ParkerD

我在我的开发环境中有一些复杂的Docker网络问题，这正是我所需要的。 - danwild

3

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

npm run start --public $C9_HOSTNAME

通过使用主机名访问应用程序（例如，在终端中输入$C_HOSTNAME来获取主机名）。

- rex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 刘芳友 · Accepted Answer

问题的原因是因为 webpack-dev-server 2.4.4 增加了主机检查。您可以通过将以下内容添加到 webpack 配置文件来禁用它：

问题发生的原因是因为webpack-dev-server 2.4.4 添加了主机检查。您可以通过将以下内容添加到您的 webpack 配置中来禁用它：

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

 }

请注意，这个修复方法是不安全的。

请查看这个答案获取一个安全的解决方案。

这个选项在4.0.0版本中得到了重构。现在应该使用allowedHosts选项：

devServer: {
  allowedHosts: "all"
}