Заголовок неверного хоста Webpack: невозможно получить доступ к серверу webpack dev из локальной сети

Хотите протестировать свой веб-проект с других устройств как мобильный телефон в локальной сети с помощью Webpack? Возможно, вы уже сталкивались с Invalid Host Header ошибка на вашей веб-странице, которая не позволяет вам проверить, как ваш проект выглядит на этом устройстве.

В этой статье мы покажем вам 2 обходных пути для легкого доступа к вашему dev-серверу из локальной сети.

А. Укажите свой хост

Вы можете указать IP-адрес, который может быть публично доступен вашему dev-серверу, установив общедоступный флаг, а также IP-адрес и порт в качестве аргумента в команде start вашего dev-сервера (package.json) или непосредственно в команде, если вы запускаете ее из командной строки, например --public 192.xx.xx.xx:8080:

{
"scripts": {
"start": "webpack-dev-server [the rest of your config] --public xxx.xxx.xxx.xx:port"
}
}

Не забудьте остановить работающий сервер Dev и запустить его снова.

Б. Отключить проверку хоста

Другая альтернатива — отключить процесс проверки хоста, установив для флага disableHostCheck значение true в свойстве devServer вашей конфигурации dev-сервера webpack (webpack-dev-server.config.js). Эта функция доступна с момента выпуска веб-пакета 2.4.3.

Вам нужно установить хост на 0.0.0.0 Кроме того, в противном случае, если вы попытаетесь получить доступ к серверу с IP-адреса с другого устройства, он будет загружаться и загружаться, но ничего не произойдет:

Заметка

Этот подход предназначен для использования за прокси или аналогичными настройками, чтобы отключить эту проверку. Используйте его только тогда, когда вы знаете, что делаете, хотя это и не рекомендуется.

// .. rest of webpack dev server
const config = {
// .. rest of config object
// Server Configuration options
devServer: {
// .. rest of devserver options
host: '0.0.0.0',
disableHostCheck: true
},
// .. rest of config object
};
// .. rest of webpack dev server

Как упоминалось в предыдущем шаге, не забудьте остановить работающий сервер dev и запустить его снова. Любой из предыдущих обходных путей должен позволить вам изучить ваш проект из локальной сети всего за пару секунд.