Podczas uruchamiania mojej aplikacji React na serwerze deweloperskim Webpack w Cloud9.io pojawia się komunikat „Invalid Host header”

176

Używam środowiska IDE online Cloud9.io ubuntu VM i ograniczyłem się, rozwiązując ten błąd, do uruchamiania aplikacji z serwerem deweloperskim Webpack.

Uruchamiam go za pomocą:

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

$ IP to zmienna, która ma adres hosta, a $ PORT ma numer portu.

Poinstruowano mnie, aby używać tych zmiennych podczas wdrażania aplikacji w chmurze 9, ponieważ mają one domyślne informacje o adresie IP i porcie.

Serwer uruchamia się i kompiluje kod, nie ma problemu, ale nie pokazuje mi pliku indeksu. Tylko pusty ekran z tekstem „Nieprawidłowy nagłówek hosta”.

To jest żądanie:

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

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 to z powodu mojej konfiguracji hosta. W webpack-dev-server / lib / Server.js line 60. Z https://github.com/webpack/webpack-dev-server

Moje pytanie brzmi, jak skonfigurować, aby poprawnie przejść ten test. Każda pomoc byłaby bardzo mile widziana.

Artur Vieira
źródło
Wygląda na to, że problem wykracza poza komentowany zakres.
elmeister
Nie rozumiem, jak się dzieje. Czy możesz wskazać mi właściwy kierunek?
Artur Vieira,
Okazuje się, że w moim przypadku najlepsza odpowiedź zadziałała.
MrMesees

Odpowiedzi:

311

Problem występuje, ponieważ webpack-dev-server2.4.4 dodaje sprawdzanie hosta. Możesz go wyłączyć, dodając to do konfiguracji swojego pakietu internetowego:

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

 }      

EDYCJA: Uwaga, ta poprawka nie jest bezpieczna.

Zapoznaj się z następującą odpowiedzią, aby uzyskać bezpieczne rozwiązanie: https://stackoverflow.com/a/43621275/5425585

刘芳友
źródło
13
To jest kwestia bezpieczeństwa. Zamiast tego użyj opcji public, aby określić dozwoloną nazwę hosta. Więcej informacji można znaleźć na medium.com/webpack/ ...
SystemParadox
5
sama opcja publiczna nie zadziałała dla mnie ... disableHostCheck jest jedyną rzeczą, która ją rozwiązała: \
davidkomer
@davidkomer to samo dla mnie. Jedyne, co działa, to disableHostCheck ...
irl_irl
6
Jest to problem z bezpieczeństwem, jeśli używasz serwera deweloperskiego pakietu webpack do czegoś innego niż lokalny programista.
AlienWebguy
U mnie to też zadziałało. Mój przypadek polegał na tym, że korzystałem z instalacji bitnami Multisite Worpdress, serwowanej na 192.168.0.106.xip.io. Dziwne jest to, że mogłem pracować na mojej starej instalacji Apache Linux bez tej „poprawki”. Dopóki nie przełączyłem się na pakiet Bitnami, ten problem się pojawił.
Hybrydowy programista sieciowy
103

Dowiedziałem się, że muszę ustawić publicwłaściwość devServer na wartość hosta mojego żądania. Ponieważ będzie wyświetlany pod tym adresem zewnętrznym.

Więc potrzebowałem tego w moim 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

Artur Vieira
źródło
1
Spotkałem się z tym również dzisiaj! Dziękuję za wysłanie!
JohnnyQ
5
Właśnie dzisiaj wpadłem na to. Wygląda na to, że webpack-dev-serverostatnio wprowadzono tę zmianę, która wymaga poprawnego nagłówka hosta. Więcej informacji można znaleźć pod adresem github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 .
Kaitrono
2
Zmiana dotyczy również webpack-dev-server 1.16.4. Możesz przeczytać więcej na ten temat tutaj: medium.com/webpack/… .
Tyler Collier
1
U mnie to zadziałało, gdy napotkałem Invalid Host headerbłąd w projekcie vue cli.
Timmy Von Heiss
43

Oto, co zadziałało dla mnie:

Dodaj allowedHosts w devServer w swoim webpack.config.js:

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

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

irl_irl
źródło
Jeśli masz HotModuleReload, wydaje się, że publicparametr jest tym, co ustawia adres URL używany jako cel (jeśli nie może go odgadnąć na podstawie sposobu wyświetlania strony, co dla mnie nie może).
Tom Saleeba
15

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

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}
Sampath
źródło
2
Działa to również w przypadku nowej konfiguracji Vue.js vue-cli: github.com/vuejs/vue-cli/blob/dev/docs/config.md
CenterOrbit
10

Bardziej bezpieczną opcją byłoby dodanie allowedHosts do konfiguracji WebPacka w następujący sposób:

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

Tablica zawiera wszystkie dozwolone hosty, możesz także określić subdomeny. sprawdź więcej tutaj

AV Paul
źródło
5

Jeśli jeszcze nie wyłączyłeś się z CRA, nie możesz łatwo zmodyfikować konfiguracji swojego webpacka. Plik konfiguracyjny jest ukryty w node_modules/react_scripts/config/webpackDevServer.config.js. Odradza się zmienianie tej konfiguracji.

Zamiast tego, można po prostu ustawić zmienną środowiskową DANGEROUSLY_DISABLE_HOST_CHECKaby truewyłączyć sprawdzanie hosta:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command
Lukas Kalbertodt
źródło
1
Dziękuję Lukas Kalbertodt, najlepsza odpowiedź. Użyłem: eksport DANGEROUSLY_DISABLE_HOST_CHECK = true; npm start
Mark Kahn
3

Zamiast edytować plik konfiguracyjny pakietu internetowego, łatwiejszym sposobem wyłączenia sprawdzania hosta jest dodanie .envpliku do folderu głównego i umieszczenie tego:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Jak wskazuje nazwa zmiennej, wyłączenie jej jest niebezpieczne i zalecane jest używanie tylko w środowisku deweloperskim.

Kyle Ordona
źródło
2

Jeśli używasz aplikacji create-react-app na C9, po prostu uruchom to polecenie, aby rozpocząć

npm run start --public $C9_HOSTNAME

I $C_HOSTNAMEuzyskaj dostęp do aplikacji z dowolnej nazwy hosta (np. Wpisz terminal, aby uzyskać nazwę hosta)

rex
źródło
0

Jeśli pracujesz webpack-dev-serverw kontenerze i wysyłasz do niego żądania za pośrednictwem jego nazwy, pojawi się ten błąd. Aby zezwolić na żądania z innych kontenerów w tej samej sieci, po prostu podaj nazwę kontenera (lub inną nazwę używaną do rozpoznania kontenera) za pomocą --publicopcji. Jest to lepsze niż całkowite wyłączenie kontroli bezpieczeństwa.

W moim przypadku działałem webpack-dev-serverw kontenerze o nazwie assetsdocker-compose. Zmieniłem polecenie start na to:

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

Drugi kontener mógł teraz wysyłać żądania za pośrednictwem http://assets:5000.

Parker D.
źródło