Я использую в качестве среды онлайн-среду IDE Cloud9.io ubuntu VM, и, устраняя эту ошибку, я сократил эту ошибку до простого запуска приложения с сервером разработки Webpack.

Запускаю с:

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

$ IP - это переменная с адресом хоста $ PORT имеет номер порта.

Мне поручено использовать эти переменные при развертывании приложения в Cloud 9, поскольку они имеют IP-адрес и информацию о ПОРТАХ по умолчанию.

Сервер загружается и компилирует код, без проблем, это , а не, но показывает мне индексный файл. Только пустой экран с текстом «Недопустимый заголовок хоста».

Это Запрос:

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
  }
}

Сервер разработки Webpack возвращает это из-за настройки моего хоста. В webpack-dev-server / lib / Server.js строка 60. From https://github.com/webpack/webpack-dev-server

У меня вопрос, как мне правильно пройти эту проверку. Любая помощь будет принята с благодарностью.

Ответы (18)

Я обнаружил, что мне нужно установить свойство 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 for Cloud9 external IP

Начиная с webpack-dev-server 4 вам нужно добавить это в свою конфигурацию:

devServer: {
  брандмауэр: ложь,
}

При использовании поведения по умолчанию (без файла конфигурации) с веб-пакетом 5, связанным с этим сообщением: [https://stackoverflow.com/a/65268634/2544762`]

"scripts": {
    "dev": "webpack serve --mode development --env development --hot --port 3000"
    ...
    ...
},
"devDependencies": {
    ...
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0"
},

С помощью webpack 5 help webpack serve --help:

Usage: webpack serve|server|s [entries...] [options]

Run the webpack dev server.

Options:
  -c, --config      Provide path to a webpack configuration file e.g.
                              ./webpack.config.js.
  --config-name     Name of the configuration to use.
  -m, --merge                 Merge two or more configurations using
                              'webpack-merge'.
  --env             Environment passed to the configuration when it
                              is a function.
  --node-env           Sets process.env.NODE_ENV to the specified value.
  --progress [value]          Print compilation progress during build.
  -j, --json [value]          Prints result as JSON or store it in a file.
  -d, --devtool        Determine source maps to use.
  --no-devtool                Do not generate source maps.
  --entry           The entry point(s) of your application e.g.
                              ./src/main.js.
  --mode               Defines the mode to pass to webpack.
  --name               Name of the configuration. Used when loading
                              multiple configurations.
  -o, --output-path    Output location of the file generated by webpack
                              e.g. ./dist/.
  --stats [value]             It instructs webpack on how to treat the stats
                              e.g. verbose.
  --no-stats                  Disable stats output.
  -t, --target      Sets the build target e.g. node.
  --no-target                 Negative 'target' option.
  --watch-options-stdin       Stop watching when stdin stream has ended.
  --no-watch-options-stdin    Do not stop watching when stdin stream has ended.
  --bonjour                   Broadcasts the server via ZeroConf networking on
                              start
  --lazy                      Lazy
  --liveReload                Enables/Disables live reloading on changing files
  --serveIndex                Enables/Disables serveIndex middleware
  --inline                    Inline mode (set to false to disable including
                              client scripts like livereload)
  --profile                   Print compilation profile data for progress steps
  --progress                  Print compilation progress in percentage
  --hot-only                  Do not refresh page if HMR fails
  --stdin                     close when stdin ends
  --open [value]              Open the default browser, or optionally specify a
                              browser name
  --useLocalIp                Open default browser with local IP
  --open-page          Open default browser with the specified page
  --client-log-level   Log level in the browser (trace, debug, info,
                              warn, error or silent)
  --https                     HTTPS
  --http2                     HTTP/2, must be used with HTTPS
  --key                Path to a SSL key.
  --cert               Path to a SSL certificate.
  --cacert             Path to a SSL CA certificate.
  --pfx                Path to a SSL pfx file.
  --pfx-passphrase     Passphrase for pfx file.
  --content-base       A directory or URL to serve HTML content from.
  --watch-content-base        Enable live-reloading of the content-base.
  --history-api-fallback      Fallback to /index.html for Single Page
                              Applications.
  --compress                  Enable gzip compression
  --port               The port
  --disable-host-check        Will not check the host
  --socket             Socket to listen
  --public             The public hostname/ip address of the server
  --host               The hostname/ip address the server will bind to
  --allowed-hosts   A list of hosts that are allowed to access the
                              dev server, separated by spaces

Global options:
  --color                     Enable colors on console.
  --no-color                  Disable colors on console.
  -v, --version               Output the version number of 'webpack',
                              'webpack-cli' and 'webpack-dev-server' and
                              commands.
  -h, --help [verbose]        Display help for commands and options.

To see list of all supported commands and options run 'webpack --help=verbose'.

Webpack documentation: https://webpack.js.org/.
CLI documentation: https://webpack.js.org/api/cli/.
Made with ♥ by the webpack team.
Done in 0.44s.

Решение

Итак, просто добавьте - disable-host-check с командой webpack serve, чтобы добиться цели.

Я решил эту проблему, добавив проксирование заголовка хоста в конфигурацию nginx, например:

server {
    listen 80;
    server_name     localhost:3000;

    location / {
        proxy_pass http://myservice:8080/;

        proxy_set_header HOST $host;
        proxy_set_header Referer $http_referer;
    }
}

Я добавил, что:

proxy_set_header HOST $ host;

proxy_set_header Referer $ http_referer;

примечание для пользователей vue-cli:

поместите в корень файл vue.config.js, с такими же строчками:

module.exports = {
  configureWebpack: {
    devServer: {
      public: '0.0.0.0:8080',
      host: '0.0.0.0',
      disableHostCheck: true,
    }
  }
};

Любой, кто придет сюда в 2021 году на webpack-dev-server v4 +,

allowedHosts и disableHostsCheck были удалены в пользу allowedHosts: 'all'

Чтобы избавиться от ошибки, измените свой devServer на этот:

devServer: {
  сжатие: истина,
  allowedHosts: 'все'
}

Когда выполняется HTTP-запрос, по умолчанию браузеры / клиенты включают «Host» (из URL-адреса) как часть заголовков необработанного HTTP-запроса. В рамках дополнительной проверки безопасности / работоспособности, которая сейчас является обычным явлением, заголовок Host должен соответствовать тому, что ожидает HTTP-сервер, чтобы сервер отправил вам то, что вы ожидаете.

По умолчанию Webpack Dev Server (WDS) принимает только входящие HTTP-запросы с заголовком Host, который соответствует некоторым распространенным именам хостов, например localhost. Когда приходит запрос с неожиданным заголовком Host, серверу все равно нужно ответить чем-то. Таким образом, он делает минимум, который может: отправляет ответ со стандартным кодом ошибки HTTP и удобочитаемым сообщением в HTML: «Недопустимый заголовок хоста».

Теперь, что касается того, как исправить эту проблему, в основном есть два варианта. Скажите WDS принять больше (или все) заголовков «Host» или исправить заголовок Host, который отправляется с HTTP-запросом.

Настроить Webpack

Как правило, проще (и правильнее) указать конфигурации WDS, чтобы можно было использовать больше имен "Host". По умолчанию WDS принимает соединения только с локальной машины разработки, поэтому по умолчанию необходимо поддерживать только имя хоста localhost. Чаще всего проблема «Недопустимый заголовок хоста» возникает при попытке сервера другим клиентам в сети. После добавления host: '0.0.0.0' в конфигурацию devServer необходимо указать WDS, какие имена могут использоваться клиентами для взаимодействия с ним.require ('os'). Hostname () обычно (одно из) имен хостов, но другие имена могут быть такими же действительными. По этой причине WDS принимает список разрешенных имен.

module.exports = {
  // ...
  devServer: {
    allowedHosts: [
      требуется ('os'). имя хоста (),
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      host2.com
    ]
  }
};

Однако иногда получение правильного списка - больше проблем, чем оно того стоит, и достаточно просто указать WDS игнорировать проверку заголовка Host. В Webpack 4это была опция disableHostCheck. В Webpack 5параметр allowedHosts может быть установлен в одну строку 'all' (без массива).

Создать приложение React (CRA)

Популярный пакет create-response-app внутренне использует Webpack. В CRA есть дополнительная переменная среды, чтобы переопределить этот конкретный параметр: DANGEROUSLY_DISABLE_HOST_CHECK = true.

Отправить другой заголовок хоста

Если изменение конфигурации Webpack невозможно, другой способ обойти это - изменить конфигурацию клиента.

Один из приемов - использовать файл hosts на клиентском компьютере, чтобы необходимое имя хоста соответствовало IP-адресу сервера.

Чаще всего используется обратный прокси-сервер перед WDS. Различные прокси-серверы имеют разные значения по умолчанию для запроса, отправляемого на серверную часть (WDS). Возможно, вам потребуется специально добавить заголовок Host к запросам к бэкэнду, как ответ VivekDev предлагает.

Добавьте эту конфигурацию в свой файл конфигурации webpack при использовании webpack-dev-server (вы все равно можете указать хост как 0.0.0.0).

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

Если вы используете приложение create-response-app на C9, просто запустите эту команду, чтобы запустить

npm run start --public $C9_HOSTNAME

И получите доступ к приложению с любого имени вашего хоста (например, введите $ C_HOSTNAME в терминале, чтобы получить имя хоста)

Вместо того, чтобы редактировать файл конфигурации webpack, более простой способ отключить проверку хоста - это добавить файл .env в корневую папку и поместить его:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Как следует из названия переменной, ее отключение небезопасно, и рекомендуется использовать только в среде разработки.

Привет Разработчики React,

Вместо этого disableHostCheck: true, в webpackDevServer.config.js. Вы можете легко устранить ошибку 'недопустимые заголовки хоста' *, добавив в проект файл .env, добавив переменные HOST = 0.0.0.0 и DANGEROUSLY_DISABLE_HOST_CHECK = true в файле .env. Если вы хотите внести изменения в webpackDevServer.config.js, вам необходимо извлечь сценарии реакции с помощью 'npm run eject', что не рекомендуется делать. Поэтому лучшим решением будет добавление вышеупомянутых переменных в файл .env вашего проекта.

Счастливое кодирование :)

Более безопасным вариантом было бы добавить allowedHosts в вашу конфигурацию Webpack следующим образом:

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

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

Если вы запускаете webpack-dev-server в контейнере и отправляете ему запросы через его имя контейнера, вы получите эту ошибку. Чтобы разрешить запросы от других контейнеров в той же сети, просто укажите имя контейнера (или любое другое имя, используемое для разрешения контейнера), используя параметр - public. Это лучше, чем полное отключение проверки безопасности.

В моем случае я запускал webpack-dev-server в контейнере с именем assets с docker-compose. Я изменил команду запуска на эту:

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

А другой контейнер теперь мог делать запросы через http://assets: 5000.

Если вы еще не извлекли из CRA, вы не сможете легко изменить конфигурацию веб-пакета. Файл конфигурации скрыт в node_modules / response_scripts / config / webpackDevServer.config.js. Не рекомендуется изменять эту конфигурацию.

Вместо этого вы можете просто установить для переменной среды DANGEROUSLY_DISABLE_HOST_CHECK значение true, чтобы отключить проверку хоста:

DANGEROUSLY_DISABLE_HOST_CHECK = истинное начало пряжи
# или эквивалентная команда npm

Проблема возникает из-за того, что webpack-dev-server 2.4.4 добавляет проверку хоста. Вы можете отключить его, добавив это в конфигурацию вашего веб-пакета:

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

 }      

РЕДАКТИРОВАТЬ: Обратите внимание, это исправление небезопасно.

См. Следующий ответ для безопасного решения: https://stackoverflow.com/a/43621275/5425585

У меня возникла эта проблема при использовании подсистемы Windows для Linux (WSL2), поэтому я также поделюсь этим решением.

Моя цель состояла в том, чтобы отобразить вывод из webpack как на wsl: 3000, так и localhost: 3000, тем самым создав альтернативную локальную конечную точку.

Как и следовало ожидать, это изначально привело к возникновению ошибки «Недопустимый заголовок хоста». Казалось, ничто не помогло, пока я не добавил параметр конфигурации devServer, показанный ниже.


module.exports = {
  // ...
  devServer: {
    прокси: [
      {
        контекст: ['http://wsl: 3000'],
        цель: 'http://localhost: 3000',
      },
    ],
  },
}

Это исправило "ошибку" без каких-либо угроз безопасности.

Ссылка: webpack DevServer docs

У меня сработало вот что:

Добавьте allowedHosts в devServer в свой webpack.config.js:

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

Мне не нужно было использовать параметры --host или --public.

Я использую nginx, работающий внутри контейнера докеров, для маршрутизации трафика на основе URL-адреса.

Добавление следующих двух строк кода в файл конфигурации nginx устранило ошибку Недопустимый заголовок хоста для меня. См. Ниже файл конфигурации (default.conf).

proxy_set_header Host            $http_host;
proxy_set_header X-Forwarded-For $remote_addr;

Сначала это мой простой двухлиновый файл Dockerfile для создания контейнера nginx, а затем его настройки с маршрутизацией.

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf

Итак, когда образ создается, файл default.conf копируется в каталог конфигурации внутри контейнера nginx.

Далее файл default.conf выглядит следующим образом.

upstream ui {
    # The ui service below is a ui app running inside of a container. Inside of the container, the ui app is listening on port 3000. 
    server ui:3000;
}

upstream node-app {
    # The node-app service below is a server app running inside of a container. Inside of the container, the server is listening on port 8080. 
    server node-app:8080;
}

server {
    listen 80;

    location / {
        # The root path, with is '/' will routed to ui.
        proxy_pass http://ui;

        ################## HERE IS THE FIX ##################
        # Adding the following two lines of code finally made the error "Invalid Host header" go away.

        # The following two headers will pass the client ip address to the upstream server
        # See upstream ui at the very begining of this file.

        proxy_set_header Host            $http_host;
        proxy_set_header X-Forwarded-For $remote_addr;      
    }


    location /api {
        # Requests that have '/api' in the path are rounted to the express server.
        proxy_pass http://node-app;
    }
}
# 

Наконец, если вы хотите взглянуть на мой файл компоновки докеров, в котором есть все службы (включая nginx), вот это

version: '3'
services:
  # This is the nginx service. 
  proxy:
    build:
      # The proxy folder will have the Dockerfile and the default.conf file I mentioned above. 
      context: ./proxy 
    ports:
      - 7081:80

  redis-server:
    image: 'redis'

  node-app:
    restart: on-failure
    build: 
      context: ./globoappserver
    ports:
      - "9080:8080"     
    container_name: api-server

  ui:
    build:
      context: ./globo-react-app-ui
    environment:
        - CHOKIDAR_USEPOLLING=true      
    ports:
      - "7000:3000"
    stdin_open: true 
    volumes:
      - ./globo-react-app-ui:/usr/app

  postgres:
    image: postgres
    volumes:
      - postgres:/var/lib/postgresql/data
      - ./init-database.sql:/docker-entrypoint-initdb.d/init-database.sql
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password

volumes:
  postgres:

2022 WebDevInsider