Je reçois un message "En-tête d'hôte non valide" lors de l'exécution de l'application React sur un serveur de développement Webpack sur Cloud9.io.

Question

Je l'utilise comme un environnement, un Cloud9.io machine virtuelle ubuntu en Ligne de l'IDE et j'ai réduit par résolution de cette erreur juste de lancer l'application avec Webpack serveur de dev.

Je le lance avec:

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

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

Je suis invité à utiliser ces vars lors du déploiement d'une application dans le Cloud 9, car ils ont de la valeur par défaut adresse IP et le PORT d'info.

Le serveur démarre et compile le code, pas de problème, c'est pas en me montrant le fichier d'index. Seulement un écran vide avec "Invalide en-tête d'Hôte" en tant que 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

C'est mon colis.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
  }
}

Webpack serveur de dev est de retour ce à cause de mon hôte de l'installation. Dans webpack-dev-server/lib/Server.js la ligne 60. À partir de https://github.com/webpack/webpack-dev-server

Ma question est comment puis-je configurer correctement réussir cette vérification. Toute aide serait grandement appréciée.

Answer 1

J'ai résolu avec cela, parce que webpack-dev-server 2.4.4 ajoute un contrôle d'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

Answer 2

J'ai découvert que je devais définir la propriété public de devServer sur la valeur d'hôte 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

Answer 3

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'ai pas eu besoin d'utiliser les paramètres --host ou --public.

Answer 4

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
}
 

Answer 5

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)