web-dev-qa-db-fra.com

Je reçois un message "En-tête d'hôte non valide" lors de l'exécution de 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 le dépannage de cette erreur en exécutant simplement 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 dont l'adresse de l'hôte $ PORT a le numéro de port.

Je suis chargé d'utiliser ces vars lors du déploiement d'une application dans Cloud 9, car ils disposent des informations IP et PORT par défaut.

Le serveur démarre et compile le code, pas de problème, c’est pas qui me montre le fichier d’index. Seulement un écran vide avec "En-tête d'hôte non valide" comme texte.

C'est 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

Ceci est 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"
  }
}

C'est 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 renvoie cette erreur à cause de la configuration de mon hôte. Dans la ligne 60 de webpack-dev-server/lib/Server.js. De https://github.com/webpack/webpack-dev-server

Ma question est de savoir comment puis-je configurer pour passer correctement cette vérification. Toute aide serait grandement appréciée.

reactjswebpack-dev-servercloud9-idecloud9
132
Artur Vieira

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

J'avais donc besoin de cela 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 l’adresse IP Cloud9

80
Artur Vieira

J'ai résolu ce problème, car Webpack-dev-server 2.4.4 ajoute la vérification de l'hôte

 devServer: {

    compress: true,

    disableHostCheck: true,   // That solved it

 }

EDIT: S'il vous plaît noter, 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

248
刘芳友

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.

34
irl_irl

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

devServer: {
    disableHostCheck: true,
    Host: '0.0.0.0',
    port: 3000
}
11
Sampath

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. voir plus ici

4
AV Paul

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

npm run start --public $C9_HOSTNAME

Et accédez à l'application à partir de votre nom d'hôte (par exemple, tapez $C_HOSTNAME dans le terminal pour obtenir le nom d'hôte).

2
rex