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

m0rkklqb 于 2023-04-06 发布在 Webpack

关注(0)|答案(6)|浏览(361)

我正在使用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(),
    ...
  ]
}

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

webpack

来源：https://stackoverflow.com/questions/53906803/webpack-4-hot-reload-invalid-host-origin-header

6条答案

按热度按时间

ivqmmu1c1#

此问题可能是由最近修复的webpack-dev-server issue引起的。
为了避免出现Invalid Host/Origin header错误，请将以下内容添加到devServer条目中：

disableHostCheck: true

赞(0）回复(0）举报 2023-04-06

bxfogqkk2#

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

赞(0）回复(0）举报 2023-04-06

5f0d552i3#

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

赞(0）回复(0）举报 2023-04-06

4sup72z84#

如果是在Firefox上，可以通过在about:config中将network.http.sendOriginHeader设置为1来修复它。
这个**“Invalid Host/Origin header”**错误发生在Firefox上，因为Firefox仍然有does not sent Origin header的同源POST请求，而webpack-dev-server坚持拥有它。
（实际上，webpack-dev-server应该只检查存在的Origin头。
避免disableHostCheck！即使在您的本地开发环境中也很危险！当您访问带有恶意代码的无关站点时，它允许攻击者连接到您的开发环境。似乎really bad。