無効なHostヘッダー サーバードメインのアクセス問題

nginxをプロキシサーバーとしてvue-cliで構築した環境では、このようになります。にアクセスすると、Invalid Host ヘッダが表示されます。

これは、新バージョンのwebpack-dev-serverがセキュリティ上の理由からデフォルトでホスト名をチェックしており、ホスト名が設定されていない場合はアクセスできないからです。ホストチェックをスキップする設定にする方法と、ホストを直接自分のアドレスに設定する方法があります。

1. ホストチェックをオフにする

• ビルドディレクトリの devServer 以下にある webpack.dev.conf.js ファイルに disableHostCheck: true を追加すると、チェックをスキップすることができます。

• 同じように、package.json ファイル内の scripts コマンドを修正します: webpack-dev-server --disableHostCheck=true

2、あなたのホストに設定し、あなたのホストがxxx.com、同じ2つのメソッドを追加し、設定ファイルを変更し、スクリプトコマンド

• configディレクトリで、index.jsファイルのホストを変更します。デフォルトはlocalhostですが、xxx.comに変更することもできます。
• package.json のスクリプト文: webpack-dev-server --host=xxx.com または --public=xxx.com