Búsqueda de sitios web

javascript - Estoy recibiendo un mensaje de "Encabezado de host no válido" al conectarme a webpack-dev-server de forma remota

Estoy utilizando como entorno, un IDE en línea Ubuntu VM de Cloud9.io y he reducido mediante la solución de problemas este error a simplemente ejecutar la aplicación con el servidor de desarrollo de 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 usar estas variables al desplegar una aplicación en Cloud 9, ya que tienen la información predeterminada de IP y PUERTO.

El servidor se inicia y compila el código, sin problema, sin embargo, no me está mostrando el archivo índice. Solo una pantalla en blanco con "Invalid Host header" 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 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"
  }
}

Esto 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 configurar para pasar correctamente esta verificación. Cualquier ayuda sería muy apreciada.

Respuesta #1

El problema ocurre porque webpack-dev-server 2.4.4 agrega una verificación de host. Puedes desactivarla agregando esto a tu configuración de webpack:

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

 }

Por favor, ten en cuenta que esta solución es insegura.

Por favor, vea esta respuesta para una solución segura.

La opción fue refactorizada en la versión 4.0.0. Ahora se debe usar la opción allowedHosts:

devServer: {
  allowedHosts: "all"
}

Respuesta #2

Descubrí que necesito establecer la propiedad public de devServer, al valor del host de mi solicitud. Siendo que se mostrará en esa dirección externa.

Así que 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

Respuesta #3

Esto es lo que funcionó para mí:

Agrega allowedHosts bajo devServer en tu webpack.config.js:

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

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

Respuesta #4

En lugar de editar el archivo de configuración de webpack, la forma más fácil de desactivar la verificación del host es añadiendo un archivo .env a tu carpeta raíz y poniendo esto:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Como el nombre de la variable lo implica, desactivarla es inseguro y solo se aconseja usar en el entorno de desarrollo.

Respuesta #5

Agrega esta configuración a tu archivo de configuración de webpack al usar webpack-dev-server (aún puedes especificar el host como 0.0.0.0).

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

Respuesta #6

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

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

El arreglo contiene todos los hosts permitidos, también puedes especificar subdominios. Consulta más aquí

Respuesta #7

Si aún no has expulsado de CRA, no puedes modificar fácilmente tu configuración de webpack. El archivo de configuración está oculto en node_modules/react_scripts/config/webpackDevServer.config.js. Se desaconseja cambiar esa configuración.

En su lugar, puedes simplemente configurar la variable de entorno DANGEROUSLY_DISABLE_HOST_CHECK a true para desactivar la verificación del host:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
or the equivalent npm command

Artículos relacionados