我在Cloud9.io上的Webpack开发服务器中运行我的React应用程序时收到"Invalid Host header"消息

Question

我使用的是一个环境,一个Cloud9.io ubuntu VM Online IDE,我通过对此错误进行故障排除,只是通过Webpack dev服务器运行应用程序.

我推出它:

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

$ IP是一个变量,其主机地址为$ PORT,具有端口号.

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

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

这是请求:

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 dev服务器正在返回此状态.在webpack-dev-server/lib/Server.js第60行.来自https://github.com/webpack/webpack-dev-server

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

Answer 1

我用这个解决了,因为webpack-dev-server 2.4.4添加了主机检查

 devServer: {

    compress: true,

    disableHostCheck: true,   // That solved it

 }      

编辑:请注意,此修复程序是不安全的.

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

Answer 2

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

所以我在webpack.config.js中需要这个

devServer: {
  compress: true,
  public: 'store-client-nestroia1.c9users.io' // That solved it
}

另一种解决方案是在CLI上使用它:

webpack-dev-server --public $ C9_HOSTNAME < - 用于Cloud9外部IP的var

Answer 3

这对我有用:

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

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

我不需要使用--host或--public params.

Answer 4

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

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

Answer 5

与编辑 webpack 配置文件不同，禁用主机检查的更简单方法是将.env文件添加到根文件夹并放置：

DANGEROUSLY_DISABLE_HOST_CHECK=true

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

Answer 6

如果你还没有从 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

Answer 7

在 package.json 的“scripts”上，添加参数，--disableHostCheck=true 例如：

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

Answer 8

webpack-dev-server如果您在容器中运行并通过其容器名称向其发送请求，您将收到此错误。要允许来自同一网络上其他容器的请求，只需使用该选项提供容器名称（或用于解析容器的任何名称）即可--public。这比完全禁用安全检查要好。

webpack-dev-server就我而言，我在一个名为 docker-compose 的容器中运行assets。我将启动命令更改为：

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

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

Answer 9

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

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

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