Je reçois un message «Invalid Host header» lorsque j'exécute mon application React sur un serveur de développement Webpack sur Cloud9.io

177

J'utilise comme environnement, un Cloud9.io ubuntu VM Online IDE et j'ai réduit en résolvant cette erreur à simplement exécuter l'application avec le serveur de développement Webpack.

Je le lance avec:

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

$ IP est une variable qui a l'adresse d'hôte $ PORT a le numéro de port.

Je suis invité à utiliser ces variables lors du déploiement d'une application dans Cloud 9, car elles disposent des informations IP et PORT par défaut.

Le serveur démarre et compile le code, pas de problème, il ne me montre pas le fichier d'index. Uniquement un écran vide avec "Invalid Host header" comme texte.

Voici la demande:

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

Voici mon 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"
  }
}

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

Le serveur de développement Webpack le renvoie en raison de la configuration de mon hôte. Dans webpack-dev-server / lib / Server.js ligne 60. Depuis https://github.com/webpack/webpack-dev-server

Ma question est de savoir comment configurer pour réussir correctement cette vérification. Toute aide serait grandement appréciée.

Artur Vieira
la source
Semble que le problème est hors de la portée commentée.
elmeister
Je ne comprends pas comment le problème se produit. Pouvez-vous m'indiquer la bonne direction?
Artur Vieira
Eh bien, il s'avère que dans mon cas, la réponse principale a fonctionné.
MrMesees

Réponses:

314

Le problème se produit car webpack-dev-server2.4.4 ajoute une vérification d'hôte. Vous pouvez le désactiver en ajoutant ceci à votre configuration Webpack:

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

 }      

EDIT: Veuillez noter que ce correctif n'est pas sécurisé.

Veuillez consulter la réponse suivante pour une solution sécurisée: https://stackoverflow.com/a/43621275/5425585

刘芳友
la source
13
C'est un problème de sécurité. Utilisez plutôt l'option public pour spécifier le nom d'hôte autorisé. Voir medium.com/webpack/ ... pour plus d'informations.
SystemParadox
5
L'option publique seule ne fonctionnait pas pour moi ... disableHostCheck est la seule chose qui l'a résolu: \
davidkomer
@davidkomer pareil pour moi. La seule chose qui fonctionne est disableHostCheck ...
irl_irl
6
C'est un problème de sécurité si vous utilisez le serveur de développement webpack pour autre chose que le développement local.
AlienWebguy
Cela a fonctionné pour moi aussi. Mon cas était que j'utilisais une installation Bitnami Multisite Worpdress, servie sur 192.168.0.106.xip.io. Ce qui est étrange, c'est que j'ai pu travailler sur mon ancienne installation Apache Linux sans ce "correctif" très bien. Ce n'est pas tant que je suis passé au package Bitnami que ce problème est apparu.
Développement web hybride
103

J'ai découvert que je devais définir la publicpropriété de devServer sur la valeur d'hôte de ma requête. Étant donné qu'il sera affiché à cette adresse externe.

J'en avais donc besoin dans mon webpack.config.js

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

Une autre solution consiste à l'utiliser sur la CLI:

webpack-dev-server --public $ C9_HOSTNAME <- var pour IP externe Cloud9

Artur Vieira
la source
1
J'ai rencontré cela aujourd'hui aussi! Merci d'avoir posté!
JohnnyQ
5
Je viens également de rencontrer cela aujourd'hui. Il semble que webpack-dev-servercette modification ait récemment été apportée nécessitant le bon en-tête d'hôte. Voir github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 pour plus d'informations.
Kaitrono
2
Le changement affecte également webpack-dev-server 1.16.4. Vous pouvez en savoir plus ici: medium.com/webpack/… .
Tyler Collier
1
Cela a également fonctionné pour moi lorsque j'ai rencontré l' Invalid Host headererreur dans un projet vue cli.
Timmy Von Heiss
43

C'est ce qui a fonctionné pour moi:

Ajoutez allowedHosts sous devServer dans votre webpack.config.js:

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

Je n'avais pas besoin d'utiliser les paramètres --host ou --public.

irl_irl
la source
Si vous avez HotModuleReload, il semble que le publicparamètre est ce qui définit l'URL utilisée comme cible pour cela (s'il ne peut pas le deviner à partir de la façon dont la page est servie, ce qui pour moi, il ne pouvait pas).
Tom Saleeba
15

Ajoutez cette configuration à votre fichier de configuration webpack lorsque vous utilisez webpack-dev-server (vous pouvez toujours spécifier l'hôte comme 0.0.0.0).

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}
Sampath
la source
2
Cela fonctionne également pour la nouvelle configuration Vue.js vue-cli: github.com/vuejs/vue-cli/blob/dev/docs/config.md
CenterOrbit
10

L'option la plus sécurisée serait d'ajouter allowedHosts à votre configuration Webpack comme ceci:

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

Le tableau contient tous les hôtes autorisés, vous pouvez également spécifier des sous-domaines. en savoir plus ici

AV Paul
la source
5

Si vous ne vous êtes pas encore éjecté de CRA, vous ne pouvez pas facilement modifier la configuration de votre pack Web. Le fichier de configuration est caché dans node_modules/react_scripts/config/webpackDevServer.config.js. Vous êtes découragé de changer cette configuration.

Au lieu de cela, vous pouvez simplement définir la variable d'environnement DANGEROUSLY_DISABLE_HOST_CHECKsur truepour désactiver la vérification de l'hôte:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command
Lukas Kalbertodt
la source
1
Merci, Lukas Kalbertodt, meilleure réponse. J'ai utilisé: export DANGEROUSLY_DISABLE_HOST_CHECK = true; npm start
Mark Kahn
3

Plutôt que de modifier le fichier de configuration du pack Web, le moyen le plus simple de désactiver la vérification de l'hôte consiste à ajouter un .envfichier à votre dossier racine et à placer ceci:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Comme le nom de la variable implique, la désactivation , il est peu sûr et n'est conseillé d'utiliser uniquement dans dev environnement.

Kyle Ordona
la source
2

Si vous utilisez create-react-app sur C9, exécutez simplement cette commande pour démarrer

npm run start --public $C9_HOSTNAME

Et accédez à l'application depuis quel que soit votre nom d'hôte (par exemple, saisissez $C_HOSTNAMEle terminal pour obtenir le nom d'hôte)

rex
la source
0

Si vous exécutez webpack-dev-serverdans un conteneur et que vous lui envoyez des requêtes via son nom de conteneur, vous obtiendrez cette erreur. Pour autoriser les demandes provenant d'autres conteneurs sur le même réseau, il vous suffit de fournir le nom du conteneur (ou tout autre nom utilisé pour résoudre le conteneur) à l'aide de l' --publicoption. C'est mieux que de désactiver complètement le contrôle de sécurité.

Dans mon cas, je courais webpack-dev-serverdans un conteneur nommé assetsavec docker-compose. J'ai changé la commande de démarrage en ceci:

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

Et l'autre conteneur pouvait désormais faire des demandes via http://assets:5000.

ParkerD
la source