Fix webpack-dev-server “Invalid Host header” through a tunnel

Content updated October 25, 2026.

Why does webpack-dev-server say “Invalid Host header” when I open my app through a tunnel?

webpack-dev-server rejects unknown Host headers with “Invalid Host header”. Add the tunnel domain, such as .qurl.site, to devServer.allowedHosts, never all. Set client.webSocketURL to auto://0.0.0.0:0/ws for hot reload behind HTTPS tunnels. With qURL™, your app stays on your machine with no public URL, and each link opens once and expires on its own. If you later need one permanent public hostname, ngrok’s dev domain fits.

What you need

• A webpack-dev-server 5 or 6 app, opened through a tunnel or qURL link
• Your webpack.config.js

Steps

1. Read the error

   The page answers 403 with the plain text “Invalid Host header”. The hot reload socket is checked separately: it connects, then the server sends “Invalid Host/Origin header” and closes it, so look in the browser console rather than at a status code.

2. Allow the tool’s domain, keep the server on 127.0.0.1, and point the socket at the page

   A leading dot in allowedHosts allows the domain and every subdomain. For qURL use the domain, not the exact host from the error: the hot reload socket also checks the browser’s Origin, which is r_….qurl.site while the page’s host is c-….qurl.site. The .qurl.site entry also permits HMR origins from other qURL publishers; share only with people you trust and stop the dev server after the review. host: 127.0.0.1 matters because, with no host set, webpack-dev-server 5 and 6 listen on every network interface. webSocketURL with auto and port 0 makes the hot reload client use the page’s own protocol, host and port, which webpack’s docs recommend behind a proxy; by default the client asks for the dev server’s port, such as wss://r_….qurl.site:8080/ws, which a tunnel on port 443 does not serve.

   // webpack.config.js (merge into your existing config)
   module.exports = {
     devServer: {
       host: '127.0.0.1',
       allowedHosts: ['.qurl.site'], // ngrok: 'your-domain.ngrok-free.app'
       client: { webSocketURL: 'auto://0.0.0.0:0/ws' },
     },
   }

3. Restart the dev server and share it

   webpack-dev-server reads its config at start-up. Each qurl share link opens once and expires within 24 hours.

   qurl publish http://127.0.0.1:8080
   qurl share <CRID>

What the recipient sees

With the domain allowed, the page loads through the link.

Which tool should carry your webpack dev server?

Troubleshooting

Frequently Asked Questions