When an HTTP request is made, by default, browsers/clients include the "Host" (from the URL) as part of the headers of the raw HTTP request. As part of an extra security/sanity check that is now commonplace, that Host header must match what is expected by the HTTP server for the server to send you back what you expect.

By default, the Webpack Dev Server (WDS) only accepts incoming HTTP requests with Host header that matches some common hostnames like localhost. When a request comes in with an unexpected Host header, the server still needs to respond with something. So it does the minimum it can: send a response with a standard HTTP error code and a human readable message in the HTML: "Invalid Host header".

Now, as for how to fix this issue, there are basically two options. Tell WDS to accept more (or all) "Host" headers or fix the Host header that is sent with the HTTP request.

Configure Webpack

Generally, it's easier (and more correct) to tell the WDS configuration to allow more "Host"names to be used. By default, WDS only accepts connections from the local development machine and so, by default, only needs to support the hostname localhost. Most commonly this "Invalid Host header" issue comes up when trying to server to other clients on the network. After adding host: '0.0.0.0' to the devServer configuration, WDS needs to be told which names might be used by clients to talk to it. require('os').hostname() is usually (one of) the hostnames but other names could be just as valid. Because of this, WDS accepts a list of allowed names.

module.exports = {  //...  devServer: {    allowedHosts: [      require('os').hostname(),'host.com','subdomain.host.com','subdomain2.host.com','host2.com'    ]  }};

However, sometimes getting this list correct is more trouble than it's worth and it's good enough to just tell WDS to ignore the Host header check. In Webpack 4, it was the disableHostCheck option. In Webpack 5, the allowedHosts option could be set to the single string 'all' (no array).

Create React App (CRA)

The popular package create-react-app uses Webpack internally. CRA has an extra environment variable just to override this particular setting: DANGEROUSLY_DISABLE_HOST_CHECK=true.

Send different Host header

If changing the configuration of Webpack is not possible, the other way to get around this is to change the configuration of the client.

One trick is to use the hosts file on the client machine such that the hostname needed maps to the server's IP.

More common is when a reverse proxy is in-front of WDS. Different proxies have different defaults for the request that's sent to the backend (WDS). You might need to specifically add the Host header to the requests to the backend as VivekDev's answer suggests.