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

javascript

webpack

dev-server

remote-access

byAlex Kataev·Aug 4, 2024

To fix the "Invalid Host header" issue in webpack-dev-server, modify your webpack.config.js so that devServer.public reflects your dev server's public URL or IP. Alternatively, employ the allowedHosts option to regulate incoming hosts.

module.exports = {
  // ...
  devServer: {
    public: 'your-dev-server.com', // Replace with your server's address
    // OR
    allowedHosts: ['your-dev-server.com'], // List of allowed hosts goes here
  },
  // ...
};

Understanding the root of the issue is vital. webpack-dev-server (v4.0.0 and upwards) performs a security check on the Host header of incoming requests to ward off potential threats.

Rules of entry: `allowedHosts`

webpack-dev-server gives the option to specify which hosts can access the dev server, similar to a selective bouncer at a nightclub.

devServer: {
    allowedHosts: ['.example.com', 'subdomain.host.com', '192.168.0.1'], // Your party guests
    // ...
};

Users might be tempted to use 'all' as a catch-all for allowedHosts, much akin to throwing open the nightclub doors to anyone. However, this is not advised in production settings due to potential security risks. This approach should be reserved for controlled development situations where security implications are understood.

Cloud-based development environment: Dealing with Cloud9

For Cloud9 users (or similar cloud-based IDEs) who develop on remote virtual machines, the allowedHosts may need to include a service-provided domain:

devServer: {
    allowedHosts: ['.c9users.io', '.amazonaws.com'], // Cloud9, meet the bouncer
    // ...
};

Also, the public property should align with the IDE-provided external address, ensuring the host's response matches the request, like twins separated at birth.

Game of environments: Using variables

In a situation where you wish to toggle the host check in your development setting, consider using an environment variable:

DANGEROUSLY_DISABLE_HOST_CHECK=true // Not recommended for impressionable environments fully connected to the Internet

This change could be incorporated into a .env file, but do not implement this in live environments.

A net cast wide: Remote access configuration

When accessing the dev server remotely is required, setting the host option to 0.0.0.0 would allow connections from all network devices:

devServer: {
    host: '0.0.0.0', // Open to all, no exceptions.
    // ...
};

As always, test your configuration changes by accessing the dev server from the intended host.

Smooth serving: Potential issues to anticipate

When setting up your server, be mindful of some potential tripwires:

Port Harmony: Make sure your dev server's port isn't in conflict with other running services. It hates competing.
Compression Preferences: If you decide to serve files using gzip compression, remember it could put some strain on your CPU, akin to a gym session.
Living On The Edge: The inline option allows for handy live reloading, but this could create network disturbance akin to party noise complaints.

explain-codes / Javascript / I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely

Linked

Response to preflight request doesn't pass access control check - No 'Access-Control-Allow-Origin' header



Why does my http://localhost CORS origin not work?



"cross origin requests are only supported for HTTP." error when loading a local file



Babel-loader jsx SyntaxError: Unexpected token



Referenceerror: fetch is not defined

