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

问题描述

我正在使用 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.

我启动它:

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 中部署应用程序时使用这些变量，因为它们具有默认 IP 和端口信息.

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

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

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   <-- var for Cloud9 external IP

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