Я отримую повідомлення "Недійсний заголовок хоста" під час запуску програми "Реакт" на сервері розробок Webpack на Cloud9.io


176

Я використовую як середовище Cloud9.io ubuntu VM Online IDE, і я зменшив, усунувши цю помилку, просто запустивши додаток із веб-сервером розробників Webpack.

Я запускаю його за допомогою:

webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$ IP - це змінна, у якої адреса хоста $ PORT має номер порту.

Мені доручено використовувати ці варіанти під час розгортання програми в Cloud 9, оскільки вони мають інформацію про IP та PORT за замовчуванням.

Сервер завантажується і компілює код, без проблем, він не показує мені індексний файл. Лише порожній екран із текстом "Недійсний заголовок хоста".

Це Запит:

GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

Це мій package.json:

{
  "name": "workspace",
  "version": "0.0.0",
  "scripts": {
    "dev": "webpack -d --watch",
    "server": "webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT",
    "build": "webpack --config webpack.config.js"
  },
  "author": "Artur Vieira",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "file-loader": "^0.11.1",
    "node-fetch": "^1.6.3",
    "react": "^15.5.4",
    "react-bootstrap": "^0.30.9",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4",
    "whatwg-fetch": "^2.0.3"
  }
}

Це webpack.config.js:

const path = require('path');

module.exports = {

  entry: ['whatwg-fetch', "./app/_app.jsx"], // string | object | array
  // Here the application starts executing
  // and webpack starts bundling
  output: {
    // options related to how webpack emits results

    path: path.resolve(__dirname, "./public"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js", // string
    // the filename template for entry chunks

    publicPath: "/public/", // string
    // the url to the output directory resolved relative to the HTML page
  },

  module: {
    // configuration regarding modules

    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "./app")
        ],
        exclude: [
          path.resolve(__dirname, "./node_modules")
        ],
        loader: "babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },

  devServer: {
    compress: true
  }
}

Сервер Dev WebPack повертає це через налаштування мого хоста. В webpack-dev-server / lib / Server.js рядок 60. З https://github.com/webpack/webpack-dev-server

Моє запитання - як мені налаштувати правильно пройти цю перевірку. Будь-яка допомога буде дуже вдячна.


Здається, проблема виходить із коментованої сфери.
elmeister

Я не розумію, як проблема відбувається. Не могли б ви вказати мене в правильному напрямку?
Артур Віейра

Ну, виявляється, у моєму випадку найкраща відповідь спрацювала.
MrMesees

Відповіді:


311

Проблема виникає через те, що webpack-dev-server2.4.4 додає чек хоста. Ви можете відключити його, додавши це до конфігурації веб-пакету:

 devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it

 }      

РЕДАКТУВАННЯ. Зауважте, це виправлення небезпечно.

Про безпечне рішення див. Наступну відповідь: https://stackoverflow.com/a/43621275/5425585


13
Це питання безпеки. Замість цього використовуйте загальнодоступний параметр, щоб вказати дозволене ім'я хоста. Див. Medium.com/webpack/… для отримання додаткової інформації.
SystemParadox

5
публічний варіант один не працював для мене ... onesHostCheck - єдине, що вирішило це: \
davidkomer

@davidkomer те саме для мене. Єдине, що працює, це відключитиHostCheck ...
irl_irl

6
Це проблема безпеки, якщо ви використовуєте сервер розробників webpack для чогось іншого, ніж локальний розробник.
AlienWebguy

Це працювало і для мене. У моєму випадку я використовував установку Bitnami Multisite Worpdress, подану на 192.168.0.106.xip.io. Що дивно, я зміг працювати над старою установкою Apache Linux без цього «виправлення». Якщо я не перейшов на пакет Bitnami, що ця проблема вискочила.
Гібридна веб-

103

Я з'ясував, що мені потрібно встановити publicвластивість devServer, на значення хосту мого запиту. Будучи, що він буде відображатися за цією зовнішньою адресою

Тому мені це було потрібно в моєму webpack.config.js

devServer: {
  compress: true,
  public: 'store-client-nestroia1.c9users.io' // That solved it
}

Іншим рішенням є використання його в CLI:

webpack-dev-server --public $ C9_HOSTNAME <- var для зовнішньої IP-адреси Cloud9


1
Зустрілися з цим і сьогодні! Дякую за публікацію!
JohnnyQ

5
Також просто натрапив на це сьогодні. Схоже, webpack-dev-serverнещодавно внесені ці зміни вимагають правильного заголовка хоста. Докладнішу інформацію див. У розділі github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 .
Кайтроно

2
Зміна впливає і на webpack-dev-сервер 1.16.4. Більше про це можна прочитати тут: medium.com/webpack/… .
Тайлер Коллер

1
Це працювало і для мене, коли я стикався з Invalid Host headerпомилкою в проекті vue cli.
Timmy Von Heiss

43

Це для мене працювало:

Додайте дозволеніHosts під devServer у свій webpack.config.js:

devServer: {
  compress: true,
  inline: true,
  port: '8080',
  allowedHosts: [
      '.amazonaws.com'
  ]
},

Мені не потрібно було використовувати параметри --host або --public.


Якщо у вас є HotModuleReload, здається, publicпарам є тим, що встановлює URL-адресу, яка використовується як ціль для цього (якщо він не може здогадатися про те, як подається сторінка, а для мене це не вдалося).
Том Салееба

15

Додайте цю конфігурацію у свій конфігураційний файл вебпакету при використанні webpack-dev-сервера (ви все ще можете вказати хост як 0.0.0.0).

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}

2
Це також працює для нового Vue.js vue-cli config: github.com/vuejs/vue-cli/blob/dev/docs/config.md
CenterOrbit

10

Більш безпечним варіантом буде додати дозволенийHosts у свій конфігурацію Webpack таким чином:

module.exports = {
devServer: {
 allowedHosts: [
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  'host2.com'
   ]
  }
};

Масив містить усі дозволені хости, ви також можете вказати субдоміани. перевірити більше тут


5

Якщо ви ще не викинули з CRA, ви не можете легко змінити конфігурацію веб-пакету. Конфігураційний файл заховано в node_modules/react_scripts/config/webpackDevServer.config.js. Ви не хочете змінювати конфігурацію.

Замість цього, ви можете просто встановити змінну оточення , DANGEROUSLY_DISABLE_HOST_CHECKщоб trueвідключити перевірку хоста:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

1
Дякую, Лукас Калберттт, найкраща відповідь. Я використовував: експортувати DANGEROUSLY_DISABLE_HOST_CHECK = вірно; npm старт
Марк Кан

3

Замість того, щоб редагувати конфігураційний файл веб-пакета, простішим способом відключити перевірку хосту є додавання .envфайлу до вашої кореневої папки та введення цього:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Як випливає з назви змінної, вимкнення її небезпечно і доцільно використовувати лише в середовищі розробників.


2

Якщо ви використовуєте create-react-app на C9, просто запустіть цю команду для запуску

npm run start --public $C9_HOSTNAME

І отримуйте доступ до програми з будь-якого вашого імені хоста (наприклад, введіть $C_HOSTNAMEтермінал, щоб отримати ім'я хоста)


0

Якщо ви працюєте webpack-dev-serverв контейнері і надсилаєте до нього запити через його ім'я, ви отримаєте цю помилку. Щоб дозволити запити інших контейнерів у тій самій мережі, просто введіть ім'я контейнера (або будь-яке ім’я, яке використовується для вирішення контейнера), використовуючи --publicопцію. Це краще, ніж повністю відключати перевірку безпеки.

У моєму випадку я працював webpack-dev-serverу контейнері з іменем assetsdocker-compose. Я змінив команду start на це:

webpack-dev-server --mode development --host 0.0.0.0 --public assets

А інший контейнер тепер міг робити запити через http://assets:5000.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.