Recibo el mensaje "Encabezado de host no válido" cuando me conecto al servidor webpack-dev-server de forma remota
Estoy usando como entorno un IDE en línea de VM de Cloud9.io ubuntu y, al solucionar este error, lo he reducido a simplemente ejecutar 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 del host $PORT tiene el número de puerto.
Se me indica que use estas variables al implementar una aplicación en Cloud 9, ya que tienen la información de IP y PUERTO predeterminada.
El servidor arranca y compila el código, no hay problema, aunque no me muestra el archivo de índice. Sólo 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 Webpack está devolviendo esto debido a la configuración de mi host. En webpack-dev-server/lib/Server.js línea 60. De https://github.com/webpack/webpack-dev-server
Mi pregunta es ¿cómo configuro para pasar correctamente esta verificación? Cualquier ayuda sería muy apreciada.
El problema ocurre porque webpack-dev-server2.4.4 agrega una verificación de host. Puede desactivarlo agregando esto a la configuración de su paquete web:
devServer: {
compress: true,
disableHostCheck: true, // That solved it
}
Tenga en cuenta que esta solución no es segura .
Consulte esta respuesta para obtener una solución segura.
La opción fue refactorizada en la versión 4.0.0. allowedHostsAhora se debe utilizar la opción:
devServer: {
allowedHosts: "all"
}
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 for Cloud9 external IP