Recibo el mensaje "Encabezado de host no válido" cuando ejecuto mi aplicación React en un servidor de desarrollo Webpack en Cloud9.io

Estoy usando como entorno un IDE en línea de Cloud9.io ubuntu VM en línea y lo he solucionado resolviendo este error simplemente ejecutando la aplicación con el servidor de desarrollo Webpack.

Lo lanzo con:

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

$ IP es una variable que tiene la dirección de host $ PORT tiene el número de puerto.

Se me indica que use estos vars cuando implemente una aplicación en Cloud 9, ya que tienen la información IP y PORT predeterminada.

El servidor arranca y compila el código, no hay problema, aunque no me muestra el archivo de índice. Solo una pantalla en blanco con "Encabezado de host no válido" como texto.

Esta es la solicitud:

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

Este es mi paquete.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"
  }
}

Este es el 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
  }
}

El servidor de desarrollo de Webpack está devolviendo esto debido a la configuración de mi host. En webpack-dev-server / lib / Server.js línea 60. Desde https://github.com/webpack/webpack-dev-server

Mi pregunta es cómo configuro para pasar esta verificación correctamente. Cualquier ayuda sería muy apreciada.

El problema se produce porque webpack-dev-server2.4.4 agrega una verificación de host. Puede deshabilitarlo agregando esto a la configuración de su paquete web:

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

 }      

EDITAR: Tenga en cuenta que esta solución es insegura.

Consulte la siguiente respuesta para obtener una solución segura: https://stackoverflow.com/a/43621275/5425585

Descubrí que necesito establecer la publicpropiedad de devServer en el valor de host de mi solicitud. Siendo que se mostrará en esa dirección externa.

Entonces necesitaba esto en mi webpack.config.js

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

Otra solución es usarlo en la CLI:

webpack-dev-server --public $ C9_HOSTNAME <- var para IP externa de Cloud9

Esto es lo que funcionó para mí:

Agregue allowHosts en devServer en su webpack.config.js:

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

No necesitaba usar los parámetros --host o --public.

Agregue esta configuración a su archivo de configuración webpack cuando use webpack-dev-server (aún puede especificar el host como 0.0.0.0).

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}

La opción más segura sería agregar allowHosts a su configuración de Webpack de esta manera:

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

La matriz contiene todos los hosts permitidos, también puede especificar subdominos. mira más aquí

Si aún no ha sido expulsado de CRA, no puede modificar fácilmente la configuración de su paquete web. El archivo de configuración está oculto en node_modules/react_scripts/config/webpackDevServer.config.js. No se recomienda cambiar esa configuración.

En su lugar, sólo puede establecer la variable de entorno DANGEROUSLY_DISABLE_HOST_CHECKpara truedeshabilitar la comprobación de acogida:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

En lugar de editar el archivo de configuración del paquete web, la forma más fácil de deshabilitar la comprobación del host es agregar un .envarchivo a su carpeta raíz y poner esto:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Como el nombre de la variable implica, deshabilitarlo no es seguro y solo es aconsejable usarlo solo en entornos de desarrollo.

Si está utilizando create-react-app en C9, simplemente ejecute este comando para comenzar

npm run start --public $C9_HOSTNAME

Y acceda a la aplicación desde cualquier nombre de host (por ejemplo, escriba $C_HOSTNAMEen la terminal para obtener el nombre de host)

Si está ejecutando webpack-dev-serveren un contenedor y le está enviando solicitudes a través de su nombre de contenedor, obtendrá este error. Para permitir solicitudes de otros contenedores en la misma red, simplemente proporcione el nombre del contenedor (o cualquier nombre que se use para resolver el contenedor) usando la --publicopción Esto es mejor que deshabilitar el control de seguridad por completo.

En mi caso, estaba corriendo webpack-dev-serveren un contenedor llamado assetscon docker-compose. Cambié el comando de inicio a esto:

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

Y el otro contenedor ahora podía hacer solicitudes a través de http://assets:5000.