Encabezado de host no válido de paquete web: no se puede acceder al servidor de desarrollo de paquete web desde la LAN

Aprende a resolver el problema del encabezado de host no válido al acceder a un servidor de desarrollo de paquete web en la red de área local.

¿Quieres probar su proyecto web desde otros dispositivos como un móvil en su red de área local con Webpack? Es posible que ya se haya enfrentado al error Invalid Host Header en su página web que no le permitirá verificar qué aspecto tiene su proyecto en este dispositivo.

En este artículo, le mostraremos 2 soluciones para acceder fácilmente a su servidor de desarrollo desde su LAN.

A. Especifique su anfitrión

Puede especificar la IP que puede acceder públicamente a su servidor de desarrollo configurando la bandera pública y la IP y el puerto como argumento en el comando de inicio de su servidor de desarrollo ( package.json) o directamente en el comando si lo está ejecutando desde la línea de comando, por ejemplo --public 192.xx.xx.xx:8080:

{
    "scripts": {
        "start": "webpack-dev-server [the rest of your config] --public xxx.xxx.xxx.xx:port"
    }
}

No olvide detener cualquier servidor de desarrollo en ejecución e iniciarlo de nuevo.

B. Desactivar comprobación de host

La otra alternativa es deshabilitar el proceso de verificación de host estableciendo el indicador disableHostCheck en verdadero en la propiedad devServer de la configuración del servidor de desarrollo de su paquete web ( webpack-dev-server.config.js). Esta función está disponible desde el lanzamiento de webpack 2.4.3 .

También debe configurar el host 0.0.0.0, de lo contrario, si intenta acceder al servidor con la IP desde otro dispositivo, se cargará y cargará, pero no sucederá nada:

Nota

Este enfoque está destinado a usarse detrás de un proxy o configuraciones similares para deshabilitar esta verificación. Úselo solo cuando sepa lo que hace, aunque no es tan recomendable.

// .. resto del servidor de desarrollo webpack

const config = {
    // .. resto del objeto de configuración

    // Opciones de configuración del servidor
    devServer: {
        // .. resto de opciones de devserver

        host: '0.0.0.0',
        disableHostCheck: true
    },

    // .. resto del objeto de configuración
};

// .. resto del servidor de desarrollo webpack

Como se mencionó en el paso anterior, no olvide detener cualquier servidor de desarrollo en ejecución e iniciarlo nuevamente. Cualquiera de las soluciones anteriores debería permitirle explorar su proyecto desde la LAN en solo un par de segundos.

Que te diviertas ❤️!