I am getting an Invalid Host header message when connecting to webpack-dev-server remotely

Question

I am using as an environment  a Cloud9 io ubuntu VM Online IDE and I have reduced by troubleshooting this error to just running the app with Webpack dev server    I launch it with   webpack-dev-server -d --watch --history-api-fallback --host  IP --port  PORT    IP is a variable that has the host address  PORT has the port number   I am instructed to use these vars when deploying an app in Cloud 9  as they have the default IP and PORT info   The server boots up and compiles the code  no problem  it is not showing me the index file though  Only a blank screen with  Invalid Host header  as text   This is the Request   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   This is my 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          This is the 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         Webpack dev server is returning this because of my host setup  In webpack-dev-server lib Server js line 60  From https   github com webpack webpack-dev-server  My question is how do I setup to correctly pass this check  Any help would be greatly appreciated

User · Answer

The more secure option would be to add allowedHosts to your Webpack config like this:

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

The array contains all allowed host, you can also specify subdomians. check out more here

User · Answer

Hello React Developers  Instead of doing this disableHostCheck  true  in webpackDevServer config js  You can easily solve  invalid host headers  error by adding a  env file to you project  add the variables HOST 0 0 0 0 and DANGEROUSLY DISABLE HOST CHECK true in  env file  If you want to make changes in webpackDevServer config js  you need to extract the react-scripts by using  npm run eject  which is not recommended to do it  So the better solution is adding above mentioned variables in  env file of your project  Happy Coding

User · Answer

If you are running webpack-dev-server in a container and are sending requests to it via its container name  you will get this error  To allow requests from other containers on the same network  simply provide the container name  or whatever name is used to resolve the container  using the --public option  This is better than disabling the security check entirely   In my case  I was running webpack-dev-server in a container named assets with docker-compose  I changed the start command to this   webpack-dev-server --mode development --host 0 0 0 0 --public assets   And the other container was now able to make requests via http   assets 5000

User · Answer

Add this config to your webpack config file when using webpack-dev-server  you can still specify the host as 0 0 0 0    devServer        disableHostCheck  true      host   0 0 0 0       port  3000

User · Answer

If you are using create-react-app on C9 just run this command to start   npm run start --public  C9 HOSTNAME   And access the app from whatever your hostname is  eg type  C HOSTNAME in the terminal to get the hostname

User · Answer

I found out  that I need to set the public property of devServer  to my request s host value  Being that it will be displayed at that external address   So I needed this in my webpack config js  devServer      compress  true    public   store-client-nestroia1 c9users io     That solved it     Another solution is using it on the CLI    webpack-dev-server --public  C9 HOSTNAME    lt -- var for Cloud9 external IP

User · Answer

This is what worked for me   Add allowedHosts under devServer in your webpack config js   devServer      compress  true    inline  true    port   8080     allowedHosts            amazonaws com           I did not need to use the --host or --public params

User · Answer

I just experienced this issue while using the Windows Subsystem for Linux  WSL2   so I will also share this solution  My objective was to render the output from webpack both at wsl 3000 and localhost 3000  thereby creating an alternate local endpoint  As you might expect  this initially caused the  quot Invalid Host header quot  error to arise  Nothing seemed to help until I added the devServer config option shown below   module exports               devServer        proxy                    context    http   wsl 3000            target   http   localhost 3000                            This fixed the  quot bug quot  without introducing any security risks  Reference  webpack DevServer docs

User · Answer

If you have not ejected from CRA yet  you can t easily modify your webpack config  The config file is hidden in node modules react scripts config webpackDevServer config js  You are discouraged to change that config   Instead  you can just set the environment variable DANGEROUSLY DISABLE HOST CHECK to true to disable the host check   DANGEROUSLY DISABLE HOST CHECK true yarn start     or the equivalent npm command

User · Answer

The problem occurs because webpack-dev-server 2 4 4 adds a host check  You can disable it by adding this to your webpack config    devServer        compress  true      disableHostCheck  true       That solved it             EDIT  Please note  this fix is insecure   Please see the following answer for a secure solution  https   stackoverflow com a 43621275 5425585

User · Answer

Rather than editing the webpack config file  the easier way to disable the host check is by adding a  env file to your root folder and putting this   DANGEROUSLY DISABLE HOST CHECK true   As the variable name implies  disabling it is insecure and is only advisable to use only in dev environment

[javascript] I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely

Examples related to javascript

Examples related to webpack

Examples related to webpack-dev-server