Pytanie Otrzymuję komunikat "Nieprawidłowy nagłówek hosta" podczas uruchamiania aplikacji React na serwerze deweloperskim Webpack na Cloud9.io


Używam jako środowiska, IDE VM Online Cloud9.io Ubuntu i zmniejszyłem, rozwiązując ten problem, po prostu uruchamiając aplikację z serwerem deweloperskim Webpack.

Wprowadzam go z:

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

$ IP jest zmienną, która ma adres hosta $ PORT ma numer portu.

Polecono mi używanie tych vars podczas wdrażania aplikacji w Cloud 9, ponieważ mają one domyślny adres IP i PORT.

Serwer uruchamia się i kompiluje kod, nie ma problemu, jest nie pokazuje mi jednak plik indeksu. Tylko pusty ekran z "Nieprawidłowy nagłówek hosta" jako tekst.

To jest prośba:

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

To jest mój pakiet.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"
  }
}

To jest plik 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
  }
}

Serwer deweloperski pakietu Webpack zwraca ten wynik ze względu na moją konfigurację hosta. W webpack-dev-server / lib / Server.js wiersz 60. Od https://github.com/webpack/webpack-dev-server

Moje pytanie brzmi: jak skonfigurować, aby poprawnie przekazać tę kontrolę. Każda pomoc będzie bardzo ceniona.


76
2018-04-25 19:45


pochodzenie


Wydaje się, że problem wykracza poza skomentowany zakres. - elmeister
Nie rozumiem, jak to się dzieje. Czy możesz wskazać mi właściwy kierunek? - Artur Vieira


Odpowiedzi:


Rozwiązałem ten problem, ponieważ serwer Webpack-dev-server 2.4.4 dodaje kontrolę hosta

 devServer: {

    compress: true,

    disableHostCheck: true,   // That solved it

 }      

EDYCJA: Uwaga, ta poprawka jest niepewna.

Aby uzyskać bezpieczne rozwiązanie, zobacz następującą odpowiedź: https://stackoverflow.com/a/43621275/5425585


166
2018-04-27 02:42



To także rozwiązało dla mnie ... dzięki - John
To jest problem bezpieczeństwa. Użyj opcji publicznej, aby określić dozwoloną nazwę hosta. Widzieć medium.com/webpack/... po więcej informacji. - SystemParadox
opcja publiczna nie działa dla mnie ... disableHostCheck to jedyna rzecz, która rozwiązała to: \ - davidkomer
@davidkomer to samo dla mnie. Jedyne, co działa, to disableHostCheck ... - irl_irl
aktualizacja: stackoverflow.com/a/51463168/83452 pracuje dla mnie - irl_irl


Dowiedziałem się, że muszę ustawić public właściwość devServer, do wartości hosta mojego żądania. Jest to wyświetlane pod tym adresem zewnętrznym.

Potrzebowałem tego w moim pliku webpack.config.js

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

Innym rozwiązaniem jest użycie go w CLI:

webpack-dev-server --public $ C9_HOSTNAME <- var dla zewnętrznego adresu IP Cloud9


50
2018-04-25 21:26



Napotkano to także dzisiaj! Dziękujemy za publikację! - JohnnyQ
Również dzisiaj wpadłem na to. To wygląda jak webpack-dev-server ostatnio wprowadzono tę zmianę, wymagającą poprawnego nagłówka hosta. Widzieć github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 po więcej informacji. - Kaitrono
Zmiana dotyczy również pakietu webpack-dev-server 1.16.4. Możesz przeczytać więcej na ten temat tutaj: medium.com/webpack/.... - Tyler Collier
To zadziałało również dla mnie, gdy wpadłem na Invalid Host header błąd w projekcie vue cli. - Timmy Von Heiss


Dodaj tę konfigurację do pliku konfiguracyjnego Webpack podczas korzystania z pakietu webpack-dev-server (nadal możesz określić hosta jako 0.0.0.0).

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

3
2018-03-30 11:39



Działa to również dla nowej konfiguracji vue-cli Vue.js: github.com/vuejs/vue-cli/blob/dev/docs/config.md - CenterOrbit


Jeśli korzystasz z aplikacji do tworzenia reakcji na C9, uruchom to polecenie, aby rozpocząć

npm run start --public $C9_HOSTNAME

I dostęp do aplikacji z jakiejkolwiek nazwy hosta (np. Typ $C_HOSTNAME w terminalu, aby uzyskać nazwę hosta)


0
2018-01-09 14:19





To właśnie dla mnie zadziałało:

Dodaj allowedHosts pod devServer w twoim webpack.config.js:

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

Nie musiałem używać parametrów -host lub -public.


0
2017-07-22 08:06





Edytować node_modules/webpack-dev-server/lib/Server.js wiersz 425 zaktualizuj linię jako

return true;

-2
2017-10-31 08:03