Вставьте сюда описание изображения

Invalid Host headerВ Интернете есть множество статей, предлагающих решения этой ошибки.,Но многие из них бесполезны,Вот яма для братьев,Решение, представленное в этой статье, проверено и не вызывает проблем, братья могут с уверенностью извлечь из него уроки.

1. Феномен сообщения об ошибках

существоватьyarn serveПроект стартовал успешно,Но страница показываетInvalid Host header

Вставьте сюда описание изображения

2. Анализ причин ошибок

новая версияwebpack-dev-serverПо соображениям безопасности он будет проверен по умолчанию.hostname,Используется для предотвращения доступа с ненадежных хостов.DevServer,Когда браузер делает запрос,Он проверит заголовок хоста в запросе,нравитьсяhostname Если он не настроен, доступ будет прерван.

3. Среда проекта

Vue3：3.0.0 Npm：6.14.17 Node：16.13.0

4. Решение

1、allowedHosts

настраиватьallowedHosts,Этот вариантнастраиватьСписок хостов, которым разрешен доступ к серверу разработки。поставь этоустановлен на all Указывает, что любому хосту разрешен доступ к серверу разработки.。Эта опция связана с проверкой хоста,Но более точно контролирует, какие хосты могут получить доступ к серверу разработки.,Вместо полного отключения проверки хоста。ХОРОШОнастраиватьнесколько хостов。Подробности смотрите в официальной документации.Официальное представление разрешенных хостов

• Установить список всех хостов

allowedHosts: "all"

• Установить частичный список хостов

allowedHosts: ['xxx.com','xxx.com']

Конкретное решение заключается в следующем:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    host: 'localhost', 
    port: 8089,
    historyApiFallback: true,
    allowedHosts: "all"
  }
})

2、disableHostCheck

Этот параметр вступает в силу, если версия vue-cli 2.x.,disableHostCheckпозволятьсуществовать Отключить хост на сервере разработкиисследовать。По умолчанию,Webpack DevServerПроверяет, соответствует ли запрошенный хост настроенному хосту,для дополнительной безопасности. Если хост явно не указан в конфигурации,Webpack DevServer разрешит доступ только к локальному хосту.,чтобы предотвратить потенциальныйсуществоватьриски безопасности。добавив disableHostCheck установлен на true, чтобы разрешить запросы от других хостовпросить,Но это может увеличить потенциальные риски безопасности.,Так что используйте с осторожностью.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  disableHostCheck:true,
  devServer: {
    host: 'localhost', 
    port: 8089
  }
})

Если версия vue-cli — 3.x, будет сообщено о следующей ошибке:

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
         - options has an unknown property 'disableHostCheck'. These properties are valid:
           object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

Вставьте сюда описание изображения

Поэтому вам нужно ясно видеть свою собственную версию.

5. Расширение

1、historyApiFallback

В приведенном выше кодеhistoryApiFallbackиспользуется длясуществоватьиспользовать Vue Routerили аналогичная библиотека внешней маршрутизации,Обработка проблемы обновления страницы при переключении маршрутизации。Когда вы используете кнопки браузера «Вперед» и «Назад» или вводите вручнуюURLчас,Vue RouterИли другие библиотеки маршрутизации будутсуществовать Фронтальная коммутация маршрутизации,Но если нет подходящей конфигурации,Это приводит к ошибке 404 при обновлении страницы.

historyApiFallback:true

2、transpileDependencies

transpileDependenciesДля настройки необходимо пройти Babel Переведенные зависимые модули。По умолчанию（false）,Vue CLIи Babel Будет перенесен только код приложения.,без перевода зависимых модулей（node_modules）вводить код。Но некоторые зависимые модули могут содержать ES6+ синтаксис, если вам нужно перевести эти зависимые модули, вы можете использовать transpileDependencies Настроить。ноtranspileDependencies: true Только трехсторонние зависимости будут просматриваться и компилироваться вширь, а зависимости зависимостей обрабатываться не будут.

transpileDependencies:true

transpileDependities:['xxxx']//Укажите конкретные зависимости для перевода

3、lintOnSave

lintOnSave Используется для управления необходимостью выполнения при разработке и сохранении файлов. ESLintСтатическая проверка кода。ESLint Может помочь вам обнаружить потенциальные проблемы с кодированием и нарушения стиля.

Если lintOnSave установлен на true,затем при сохранении файла,Vue CLIбудет запускаться автоматически ESLintисследовать,Если обнаружены проблемы,Во время разработки будут сообщаться об ошибках и предупреждениях.

Если lintOnSaveустановлен на false,тогда автомат ESLintисследовать,Вам необходимо запустить проверку вручную.

Я участвую в третьем этапе специального тренировочного лагеря Tencent Technology Creation 2023 с эссе, получившими приз, и сформирую команду, которая разделит приз!