我收到“无效的主机标头"远程连接到webpack-dev-server时出现消息 [英] I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely

问题描述

我正在使用Cloud9.io ubuntu VM Online IDE作为环境，并且通过对该错误进行故障诊断而减少了使用Webpack开发服务器运行应用程序的速度.

I am using as an environment, a Cloud9.io ubuntu VM Online IDE and I have reduced by troubleshooting this error to just running the app with Webpack dev server.

我通过以下方式启动它:

I launch it with:

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

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

$IP is a variable that has the host address $PORT has the port number.

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

I am instructed to use these vars when deploying an app in Cloud 9, as they have the default IP and PORT info.

服务器启动并编译代码，没问题，虽然 not 却没有显示索引文件.只有空白屏幕，其中以无效的主机标题"为文本.

The server boots up and compiles the code, no problem, it is not showing me the index file though. Only a blank screen with "Invalid Host header" as text.

这是请求:

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:

This is my 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:

This is the 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

Webpack dev server is returning this because of my host setup. In webpack-dev-server/lib/Server.js line 60. From https://github.com/webpack/webpack-dev-server

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

My question is how do I setup to correctly pass this check. Any help would be greatly appreciated.

推荐答案

我发现，我需要将devServer的public属性设置为请求的主机值.正因为如此，它将显示在该外部地址上.

I found out, that I need to set the public property of devServer, to my request's host value. Being that it will be displayed at that external address.

所以我需要在webpack.config.js中使用它

So I needed this in my webpack.config.js

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

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

Another solution is using it on the CLI:

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

webpack-dev-server --public $C9_HOSTNAME <-- var for Cloud9 external IP

这篇关于我收到“无效的主机标头"远程连接到webpack-dev-server时出现消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！