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

webpack-dev-server cloud9-ide

Question

Estoy usando como entorno, un IDE en línea 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.

Answer 1

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
}

Answer 2

Descubrí que necesito establecer la propiedad public 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

Answer 3

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.

Answer 4

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í

Answer 5

Resolví esto, porque webpack-dev-server 2.4.4 agregar verificación de host

 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://.com/a/43621275/5425585

Answer 6

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_HOSTNAME en la terminal para obtener el nombre de host)