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

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.

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

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

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.

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
}

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

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

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.

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)

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.