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

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

此“无效的主机/来源标头” 错误在Firefox上发生，因为Firefox仍does not sent Origin header发出相同来源的POST请求，而webpack-dev-server坚持拥有它。 >

（真的，webpack-dev-server应该仅在Origin标头出现时对其进行检查。）

避免使用disableHostCheck！即使在您当地的开发环境中，这也是危险的！当您访问带有恶意代码的不相关站点时，它使攻击者可以连接到您的开发环境。看来really bad。

Answer 4

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

Answer 5

最后，它是对软件包的更新，未正确通过，并且在安装了最新版本后得到解决。

Answer 6

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

npm i -D webpack-dev-server@3.1.14

~3.1.11中发生的各个问题已得到修补。

无需更改webpack配置。

Webpack 4 Hot Reload：无效的主机/来源标头

6 个答案: