How to Fix Invalid Host Header Error in Webpack and Vite Dev Servers

When developing mobile apps that need to communicate with a local server, testing webhooks from platforms like Stripe, or sharing your local website using tunnels (such as ngrok, frp, or Cloudflare Tunnels), you will often encounter a blank page displaying this text: "Invalid Host Header".

This error is not a bug in your application code. It is a security feature built into modern development servers (like Webpack Dev Server, Vite, and Next.js) to block DNS Rebinding attacks.

In this guide, we will analyze why DNS Rebinding protections trigger host header errors and show you how to configure Vite and Webpack to bypass the error safely.

Why Does the "Invalid Host Header" Error Happen?

When you run a local development server (e.g., listening on localhost:3000), the browser sends an HTTP request containing a Host Header matching your location:

GET / HTTP/1.1
Host: localhost:3000

The dev server reads this header. If you route traffic through a tunnel service (like my-tunnel.ngrok-free.app), the incoming HTTP request carries ngrok's host header:

GET / HTTP/1.1
Host: my-tunnel.ngrok-free.app

Because my-tunnel.ngrok-free.app does not match localhost, the development server suspects a DNS Rebinding Attack (where a malicious site redirects client requests to local services to steal sensitive data). To protect your host machine, the dev server drops the connection and returns the "Invalid Host Header" status.

How to Fix It in Vite (v6+)

In modern Vite applications, you configure allowed host names using the server.allowedHosts parameter inside your configuration file.

Open vite.config.ts and declare your tunnel domain or use wildcard parameters:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    // Add specific domains to the allowed host safety list
    allowedHosts: [
      'my-tunnel.ngrok-free.app',
      '.ngrok-free.app', // Wildcard for all subdomains
      'local-custom-domain.test'
    ]
  }
});

• Vite v5 or older: If you are running older Vite runtimes, you can disable host checks entirely by setting strictPort: false or launching Vite using the --host flag. However, upgrading Vite is recommended for better security.

How to Fix It in Webpack Dev Server (Vue CLI / Create React App)

If your project utilizes Webpack (such as Create React App or Vue CLI projects), you configure the allowedHosts block inside the Webpack dev server settings.

Open webpack.config.js and edit the devServer configuration:

module.exports = {
  // Other Webpack parameters...
  devServer: {
    // Allow tunnel domains to bypass host checks
    allowedHosts: [
      'my-tunnel.ngrok-free.app',
      '.ngrok-free.app'
    ],
  },
};

The Insecure Bypass (Webpack Legacy)

In older Webpack configurations, developers bypassed host checks completely by declaring disableHostCheck: true:

// WARNING: INSECURE. Do not use in public networks
devServer: {
  disableHostCheck: true
}

• Security Warning: Disabling host check entirely leaves your local machine vulnerable to DNS Rebinding attacks from malicious tabs open in your browser. Always prefer declaring explicit host domains in allowedHosts instead.

How to Fix It in Next.js

Next.js handles local server security natively. If you run into host issues when routing tunnels to Next.js dev instances, you must pass the host headers mapping parameters inside your tunnel run arguments.

For example, when starting ngrok, tell it to overwrite host headers to match Next.js's local expectation:

# Force ngrok to rewrite Host headers to localhost:3000
ngrok http 3000 --host-header="localhost:3000"

This trick allows the dev server to receive localhost headers while the traffic routes over the public ngrok domain.

Conclusion

The "Invalid Host Header" error is an essential security protection blocking DNS Rebinding attacks. To resolve this error safely when using network tunnels, add your specific tunnel domains (or wildcards like .ngrok-free.app) to the allowedHosts array in Vite or Webpack, or configure your tunnel tool to rewrite host header properties on the fly.