Webpack 4 热重载：无效 Host/Origin header

Question

我正在与 webpack-dev-server 合作进行热重载。但是在我的控制台中它一直在说 Invalid Host/Origin header

我在 webpack 配置中的设置如下：

'use strict'

const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',

  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    hot: true,
    watchOptions: {
      poll: true
    }
  },
  module: {
    rules: [
      ...
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    ...
  ]
}

如何解决这个问题，使其在我的开发环境中正常工作？很想听到这个，因为目前我必须不断刷新页面。

Answer 1

这个问题可能是由最近修复的 webpack-dev-server issue 引起的。

为避免出现 Invalid Host/Origin header 错误，请将此添加到您的 devServer 条目中：

disableHostCheck: true

Answer 2

您的页面托管在与提供 webpack 文件的域不同的域中吗？如果是这样，您可能只需要将页面的域添加到 devServer.allowedHosts 选项。

Answer 3

最后是软件包的更新没有正确通过，安装最新版本后解决了。

Answer 4

将您的 webpack-dev-server 更新至 >= 版本 3.1.14（截至 2019 年 1 月）

npm i -D webpack-dev-server@3.1.14

~3.1.11 中出现的相应问题已修复。

无需更改 webpack 配置。

Answer 5

如果这是在 Firefox 上，您可以通过在 about:config 中将 network.http.sendOriginHeader 设置为 1 来修复它。

这个 "Invalid Host/Origin header" 错误发生在 Firefox 上，因为 Firefox 仍然 does not sent Origin header 有 same-origin POST 请求，并且 webpack-dev-server 坚持要。

（真的，webpack-dev-server 应该只在 Origin header 存在时检查它。）

避开disableHostCheck！即使在您本地的开发环境中也是危险的！当您访问带有恶意代码的不相关站点时，它允许攻击者连接到您的开发环境。好像是really bad.

Answer 6

设置allowedHosts、https://webpack.js.org/configuration/dev-server/#devserverallowedhosts。例如，如果您的网页是xyz.google.com，那么只需向其中添加一个主机.google.com。

Webpack 4 热重载：无效 Host/Origin header

Webpack 4 Hot Reload: Invalid Host/Origin header

webpack

webpack-dev-server