web-dev-qa-db-ja.com

Webpack 4ホットリロード：無効なHost / Originヘッダー

ホットリロードを行うためにwebpack-dev-serverを使用しています。ただし、コンソールではInvalid Host/Origin header

Webpack configのセットアップは次のとおりです。

'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(),
    ...
  ]
}

開発環境で機能するようにこの問題を解決するにはどうすればよいですか？現在、私は絶えずページを更新しなければならないので、これを聞いてください。

webpackwebpack-dev-server
6
Maarten Raaijmakers

この問題はおそらく、最近修正されたこのwebpack-dev-server issue が原因です。

Invalid Host/Origin headerエラーdevServerエントリにこれを追加：

disableHostCheck: true
17
pors

Webpackファイルの提供元とは異なるドメインでページがホストされていますか？その場合、ページのドメインを devServer.allowedHosts オプション。

0
broken-e

これがFirefox上にある場合、network.http.sendOriginHeaderから1 in about:config。

この "Invalid Host/Origin header"エラーは、Firefoxがまだ Originヘッダーを送信しない same-Origin = POSTリクエスト、およびwebpack-dev-serverそれを持っていることを主張します。

（本当に、 webpack-dev-serverは、Originヘッダーが存在する場合にのみ確認する必要があります。

disableHostCheckを避けてください！ローカルの開発環境でも危険です！悪意のあるコードで無関係なサイトにアクセスすると、攻撃者は開発環境に接続できます。 本当に悪い のようです。

0
DS.