当我远程连接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

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


似乎问题超出了注释范围。 - elmeister
我不明白问题是如何发生的。你能指导我正确的方向吗? - Artur Vieira
这是我在RedwoodJS中的解决方案:https://github.com/redwoodjs/redwood/issues/534#issuecomment-821832435 - Ryan
2021年更新:请指定host选项(文档)。例如:devServer: { host: 'example.com', ... } - rinogo
25个回答

0

自 webpack-dev-server 4 版本开始,您需要将以下内容添加到配置文件中:

devServer: {
  firewall: false,
}

0

对于 webpack-dev-server 4.7 版本,您可以使用 --allowed-hosts all 参数。

npx webpack serve --open --allowed-hosts all

0

这可能发生在以下两种情况下:

  1. 当您在Cloud-9或任何在线IDE(本地主机以外)上运行webpack-dev-server时。
  2. 当您想在移动设备上运行开发模式或通过公共URL快速与他人共享Web应用程序的本地主机(例如使用ngrok)。出于安全考虑,您无法从外部访问您的webpack-dev-server

您可以通过以下方式实现此目标:

devServer: {
    allowedHosts: 'auto' | 'all' | Array[string]
}
  1. 如果您不考虑安全性,可以将allowedHosts设置为“all”。(尽管不建议这样做)
  2. 如果您使用some-host-url来制作公共URL,则可以按照以下步骤操作:
devServer: {
 allowedHosts: [
  'host.com',
  'subdomain.host.com'
   ]
  }

更多信息请参考官方文档


0
我通过在 nginx 配置中添加主机头代理解决了这个问题,就像这样:

server {
    listen 80;
    server_name     localhost:3000;

    location / {
        proxy_pass http://myservice:8080/;

        proxy_set_header HOST $host;
        proxy_set_header Referer $http_referer;
    }
}

我添加了以下内容:

proxy_set_header HOST $host;

proxy_set_header Referer $http_referer;


-1

我尝试了上面的建议,但以下解决方案对我无效:

devServer: {
    allowedHosts: 'auto' | 'all' | Array[string]
}

以下解决方案适合我:
devServer: {
    disableHostCheck: true
}

1
“allowedHosts: 'auto' | 'all' | Array[string]'” 可能是该属性的签名而不是实际值。 - Eric Majerus

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接