diff --git a/jest.config.js b/jest.config.js
index c3ba113..fec0cd9 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -12,8 +12,6 @@ const config = {
     '<rootDir>/tests/e2e/*.test.js',
   ],
   testPathIgnorePatterns: [
-    // TODO: check why http proxy server throw error with websocket server
-    '<rootDir>/tests/e2e/allowed-hosts.test.js',
     // TODO: check why this test timeout
     '<rootDir>/tests/e2e/host.test.js',
     // TODO: check why this test throw error when run with other tests
diff --git a/tests/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5 b/tests/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5
index 9def00e..0125568 100644
--- a/tests/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5
+++ b/tests/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5
@@ -30,12 +30,78 @@ exports[`allowed hosts check host headers should always allow any host if option
 
 exports[`allowed hosts check host headers should always allow any host if options.allowedHosts is all: response status 1`] = `200`;
 
+exports[`allowed hosts check host headers should always allow value from the \`host\` options if options.allowedHosts is auto: console messages 1`] = `[]`;
+
+exports[`allowed hosts check host headers should always allow value from the \`host\` options if options.allowedHosts is auto: page errors 1`] = `[]`;
+
+exports[`allowed hosts check host headers should always allow value from the \`host\` options if options.allowedHosts is auto: response status 1`] = `200`;
+
 exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: console messages 1`] = `[]`;
 
 exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: page errors 1`] = `[]`;
 
 exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: response status 1`] = `200`;
 
+exports[`allowed hosts should connect web socket client using "[::1] host to web socket server with the "auto" value ("sockjs"): console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using "[::1] host to web socket server with the "auto" value ("sockjs"): page errors 1`] = `[]`;
+
+exports[`allowed hosts should connect web socket client using "[::1] host to web socket server with the "auto" value ("ws"): console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using "[::1] host to web socket server with the "auto" value ("ws"): page errors 1`] = `[]`;
+
+exports[`allowed hosts should connect web socket client using "0.0.0.0" host to web socket server with the "auto" value ("sockjs"): console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using "0.0.0.0" host to web socket server with the "auto" value ("sockjs"): page errors 1`] = `[]`;
+
+exports[`allowed hosts should connect web socket client using "0.0.0.0" host to web socket server with the "auto" value ("ws"): console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using "0.0.0.0" host to web socket server with the "auto" value ("ws"): page errors 1`] = `[]`;
+
+exports[`allowed hosts should connect web socket client using "127.0.0.1" host to web socket server by default ("sockjs"): console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using "127.0.0.1" host to web socket server by default ("sockjs"): page errors 1`] = `[]`;
+
+exports[`allowed hosts should connect web socket client using "127.0.0.1" host to web socket server by default ("ws"): console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using "127.0.0.1" host to web socket server by default ("ws"): page errors 1`] = `[]`;
+
 exports[`allowed hosts should connect web socket client using "127.0.0.1" host to web socket server with the "auto" value ("sockjs"): console messages 1`] = `
 [
   "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
@@ -96,6 +162,26 @@ exports[`allowed hosts should connect web socket client using "file:" protocol t
 
 exports[`allowed hosts should connect web socket client using "file:" protocol to web socket server with the "auto" value ("ws"): page errors 1`] = `[]`;
 
+exports[`allowed hosts should connect web socket client using "localhost" host to web socket server by default ("sockjs"): console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using "localhost" host to web socket server by default ("sockjs"): page errors 1`] = `[]`;
+
+exports[`allowed hosts should connect web socket client using "localhost" host to web socket server by default ("ws"): console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using "localhost" host to web socket server by default ("ws"): page errors 1`] = `[]`;
+
 exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value ("sockjs"): console messages 1`] = `
 [
   "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
@@ -236,18 +322,72 @@ exports[`allowed hosts should connect web socket client using localhost to web s
 
 exports[`allowed hosts should connect web socket client using localhost to web socket server with the "auto" value ("ws"): page errors 1`] = `[]`;
 
-exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("sockjs"): console messages 1`] = `[]`;
+exports[`allowed hosts should connect web socket client using origin header containing an IP address with the custom hostname value ("sockjs"): (work) console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using origin header containing an IP address with the custom hostname value ("sockjs"): (work) page errors 1`] = `[]`;
+
+exports[`allowed hosts should connect web socket client using origin header containing an IP address with the custom hostname value ("ws"): (work) console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
 
-exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("sockjs"): html 1`] = `"<html><head></head><body>Invalid Host header</body></html>"`;
+exports[`allowed hosts should connect web socket client using origin header containing an IP address with the custom hostname value ("ws"): (work) page errors 1`] = `[]`;
+
+exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("sockjs"): console messages 1`] = `
+[
+  "Failed to load resource: the server responded with a status of 403 (Forbidden)",
+]
+`;
+
+exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("sockjs"): html 1`] = `"<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">Invalid Host header</pre></body></html>"`;
 
 exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("sockjs"): page errors 1`] = `[]`;
 
-exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("ws"): console messages 1`] = `[]`;
+exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("ws"): console messages 1`] = `
+[
+  "Failed to load resource: the server responded with a status of 403 (Forbidden)",
+]
+`;
 
-exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("ws"): html 1`] = `"<html><head></head><body>Invalid Host header</body></html>"`;
+exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("ws"): html 1`] = `"<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">Invalid Host header</pre></body></html>"`;
 
 exports[`allowed hosts should disconnect web client using localhost to web socket server with the "auto" value ("ws"): page errors 1`] = `[]`;
 
+exports[`allowed hosts should disconnect web client using origin header containing an IP address with the "auto" value ("sockjs"): (work) console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Invalid Host/Origin header",
+  "[webpack-dev-server] Disconnected!",
+  "[webpack-dev-server] Trying to reconnect...",
+]
+`;
+
+exports[`allowed hosts should disconnect web client using origin header containing an IP address with the "auto" value ("sockjs"): (work) page errors 1`] = `[]`;
+
+exports[`allowed hosts should disconnect web client using origin header containing an IP address with the "auto" value ("ws"): (work) console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Invalid Host/Origin header",
+  "[webpack-dev-server] Disconnected!",
+  "[webpack-dev-server] Trying to reconnect...",
+]
+`;
+
+exports[`allowed hosts should disconnect web client using origin header containing an IP address with the "auto" value ("ws"): (work) page errors 1`] = `[]`;
+
 exports[`allowed hosts should disconnect web socket client using custom hostname from web socket server with the "auto" value based on the "host" header ("sockjs"): console messages 1`] = `
 [
   "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
diff --git a/tests/e2e/allowed-hosts.test.js b/tests/e2e/allowed-hosts.test.js
index 277acfe..e283690 100644
--- a/tests/e2e/allowed-hosts.test.js
+++ b/tests/e2e/allowed-hosts.test.js
@@ -10,8 +10,8 @@ const webSocketServers = ['ws', 'sockjs'];
 
 describe('allowed hosts', () => {
   for (const webSocketServer of webSocketServers) {
-    it(`should disconnect web socket client using custom hostname from web socket server with the "auto" value based on the "host" header ("${webSocketServer}")`, async () => {
-      const devServerHost = '127.0.0.1';
+    it(`should connect web socket client using localhost to web socket server with the "auto" value ("${webSocketServer}")`, async () => {
+      const devServerHost = 'localhost';
       const devServerPort = port1;
       const proxyHost = devServerHost;
       const proxyPort = port2;
@@ -38,10 +38,6 @@ describe('allowed hosts', () => {
         app.use(
           '/',
           createProxyMiddleware({
-            // Emulation
-            onProxyReqWs: (proxyReq) => {
-              proxyReq.setHeader('host', 'my-test-host');
-            },
             target: `http://${devServerHost}:${devServerPort}`,
             ws: true,
             changeOrigin: true,
@@ -59,7 +55,6 @@ describe('allowed hosts', () => {
       });
 
       const { page, browser } = await runBrowser();
-
       try {
         const pageErrors = [];
         const consoleMessages = [];
@@ -88,8 +83,8 @@ describe('allowed hosts', () => {
       }
     });
 
-    it(`should disconnect web socket client using custom hostname from web socket server with the "auto" value based on the "host" header when "server: 'https'" is enabled ("${webSocketServer}")`, async () => {
-      const devServerHost = '127.0.0.1';
+    it(`should connect web socket client using "localhost" host to web socket server by default ("${webSocketServer}")`, async () => {
+      const devServerHost = 'localhost';
       const devServerPort = port1;
       const proxyHost = devServerHost;
       const proxyPort = port2;
@@ -99,14 +94,11 @@ describe('allowed hosts', () => {
         client: {
           webSocketURL: {
             port: port2,
-            protocol: 'ws',
           },
         },
         webSocketServer,
         port: devServerPort,
         host: devServerHost,
-        allowedHosts: 'auto',
-        server: 'https',
       };
       const server = new Server(devServerOptions, compiler);
 
@@ -118,12 +110,7 @@ describe('allowed hosts', () => {
         app.use(
           '/',
           createProxyMiddleware({
-            // Emulation
-            onProxyReqWs: (proxyReq) => {
-              proxyReq.setHeader('host', 'my-test-host');
-            },
-            target: `https://${devServerHost}:${devServerPort}`,
-            secure: false,
+            target: `http://${devServerHost}:${devServerPort}`,
             ws: true,
             changeOrigin: true,
             logLevel: 'warn',
@@ -169,7 +156,7 @@ describe('allowed hosts', () => {
       }
     });
 
-    it(`should disconnect web socket client using custom hostname from web socket server with the "auto" value based on the "origin" header ("${webSocketServer}")`, async () => {
+    it(`should connect web socket client using "127.0.0.1" host to web socket server by default ("${webSocketServer}")`, async () => {
       const devServerHost = '127.0.0.1';
       const devServerPort = port1;
       const proxyHost = devServerHost;
@@ -185,7 +172,6 @@ describe('allowed hosts', () => {
         webSocketServer,
         port: devServerPort,
         host: devServerHost,
-        allowedHosts: 'auto',
       };
       const server = new Server(devServerOptions, compiler);
 
@@ -197,10 +183,6 @@ describe('allowed hosts', () => {
         app.use(
           '/',
           createProxyMiddleware({
-            // Emulation
-            onProxyReqWs: (proxyReq) => {
-              proxyReq.setHeader('origin', 'http://my-test-origin.com/');
-            },
             target: `http://${devServerHost}:${devServerPort}`,
             ws: true,
             changeOrigin: true,
@@ -247,8 +229,8 @@ describe('allowed hosts', () => {
       }
     });
 
-    it(`should connect web socket client using localhost to web socket server with the "auto" value ("${webSocketServer}")`, async () => {
-      const devServerHost = 'localhost';
+    it(`should connect web socket client using "127.0.0.1" host to web socket server with the "auto" value ("${webSocketServer}")`, async () => {
+      const devServerHost = '127.0.0.1';
       const devServerPort = port1;
       const proxyHost = devServerHost;
       const proxyPort = port2;
@@ -292,6 +274,7 @@ describe('allowed hosts', () => {
       });
 
       const { page, browser } = await runBrowser();
+
       try {
         const pageErrors = [];
         const consoleMessages = [];
@@ -320,8 +303,8 @@ describe('allowed hosts', () => {
       }
     });
 
-    it(`should connect web socket client using "127.0.0.1" host to web socket server with the "auto" value ("${webSocketServer}")`, async () => {
-      const devServerHost = '127.0.0.1';
+    it(`should connect web socket client using "[::1] host to web socket server with the "auto" value ("${webSocketServer}")`, async () => {
+      const devServerHost = '::1';
       const devServerPort = port1;
       const proxyHost = devServerHost;
       const proxyPort = port2;
@@ -348,7 +331,7 @@ describe('allowed hosts', () => {
         app.use(
           '/',
           createProxyMiddleware({
-            target: `http://${devServerHost}:${devServerPort}`,
+            target: `http://[${devServerHost}]:${devServerPort}`,
             ws: true,
             changeOrigin: true,
             logLevel: 'warn',
@@ -378,7 +361,7 @@ describe('allowed hosts', () => {
             pageErrors.push(error);
           });
 
-        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+        await page.goto(`http://[${proxyHost}]:${proxyPort}/`, {
           waitUntil: 'networkidle0',
         });
 
@@ -394,10 +377,11 @@ describe('allowed hosts', () => {
       }
     });
 
-    it(`should connect web socket client using "[::1] host to web socket server with the "auto" value ("${webSocketServer}")`, async () => {
-      const devServerHost = '::1';
+    it(`should connect web socket client using "0.0.0.0" host to web socket server with the "auto" value ("${webSocketServer}")`, async () => {
+      const devServerHost = '0.0.0.0';
+      const IPv4 = Server.findIp('v4');
       const devServerPort = port1;
-      const proxyHost = devServerHost;
+      const proxyHost = IPv4;
       const proxyPort = port2;
 
       const compiler = webpack(config);
@@ -422,7 +406,7 @@ describe('allowed hosts', () => {
         app.use(
           '/',
           createProxyMiddleware({
-            target: `http://[${devServerHost}]:${devServerPort}`,
+            target: `http://${IPv4}:${devServerPort}`,
             ws: true,
             changeOrigin: true,
             logLevel: 'warn',
@@ -452,7 +436,7 @@ describe('allowed hosts', () => {
             pageErrors.push(error);
           });
 
-        await page.goto(`http://[${proxyHost}]:${proxyPort}/`, {
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
           waitUntil: 'networkidle0',
         });
 
@@ -1093,6 +1077,321 @@ describe('allowed hosts', () => {
       }
     });
 
+    it(`should connect web socket client using origin header containing an IP address with the custom hostname value ("${webSocketServer}")`, async () => {
+      const devServerHost = '127.0.0.1';
+      const devServerPort = port1;
+      const proxyHost = devServerHost;
+      const proxyPort = port2;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            port: port2,
+          },
+        },
+        webSocketServer,
+        port: devServerPort,
+        host: devServerHost,
+        allowedHosts: ['192.168.1.1'],
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const app = express();
+
+        app.use(
+          '/',
+          createProxyMiddleware({
+            // Emulation
+            onProxyReqWs: (proxyReq) => {
+              proxyReq.setHeader('origin', 'http://192.168.1.1/');
+            },
+            target: `http://${devServerHost}:${devServerPort}`,
+            ws: true,
+            changeOrigin: true,
+            logLevel: 'warn',
+          }),
+        );
+
+        return app.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      try {
+        const pageErrors = [];
+        const consoleMessages = [];
+
+        page
+          .on('console', (message) => {
+            consoleMessages.push(message);
+          })
+          .on('pageerror', (error) => {
+            pageErrors.push(error);
+          });
+
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+          waitUntil: 'networkidle0',
+        });
+
+        expect(
+          consoleMessages.map((message) => message.text()),
+        ).toMatchSnapshot('(work) console messages');
+        expect(pageErrors).toMatchSnapshot('(work) page errors');
+      } finally {
+        proxy.close();
+
+        await browser.close();
+        await server.stop();
+      }
+    });
+
+    it(`should disconnect web socket client using custom hostname from web socket server with the "auto" value based on the "host" header ("${webSocketServer}")`, async () => {
+      const devServerHost = '127.0.0.1';
+      const devServerPort = port1;
+      const proxyHost = devServerHost;
+      const proxyPort = port2;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            port: port2,
+          },
+        },
+        webSocketServer,
+        port: devServerPort,
+        host: devServerHost,
+        allowedHosts: 'auto',
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const app = express();
+
+        app.use(
+          '/',
+          createProxyMiddleware({
+            // Emulation
+            onProxyReqWs: (proxyReq) => {
+              proxyReq.setHeader('host', 'my-test-host');
+            },
+            target: `http://${devServerHost}:${devServerPort}`,
+            ws: true,
+            changeOrigin: true,
+            logLevel: 'warn',
+          }),
+        );
+
+        return app.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      try {
+        const pageErrors = [];
+        const consoleMessages = [];
+
+        page
+          .on('console', (message) => {
+            consoleMessages.push(message);
+          })
+          .on('pageerror', (error) => {
+            pageErrors.push(error);
+          });
+
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+          waitUntil: 'networkidle0',
+        });
+
+        expect(
+          consoleMessages.map((message) => message.text()),
+        ).toMatchSnapshot('console messages');
+        expect(pageErrors).toMatchSnapshot('page errors');
+      } finally {
+        proxy.close();
+
+        await browser.close();
+        await server.stop();
+      }
+    });
+
+    it(`should disconnect web socket client using custom hostname from web socket server with the "auto" value based on the "host" header when "server: 'https'" is enabled ("${webSocketServer}")`, async () => {
+      const devServerHost = '127.0.0.1';
+      const devServerPort = port1;
+      const proxyHost = devServerHost;
+      const proxyPort = port2;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            port: port2,
+            protocol: 'ws',
+          },
+        },
+        webSocketServer,
+        port: devServerPort,
+        host: devServerHost,
+        allowedHosts: 'auto',
+        server: 'https',
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const app = express();
+
+        app.use(
+          '/',
+          createProxyMiddleware({
+            // Emulation
+            onProxyReqWs: (proxyReq) => {
+              proxyReq.setHeader('host', 'my-test-host');
+            },
+            target: `https://${devServerHost}:${devServerPort}`,
+            secure: false,
+            ws: true,
+            changeOrigin: true,
+            logLevel: 'warn',
+          }),
+        );
+
+        return app.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      try {
+        const pageErrors = [];
+        const consoleMessages = [];
+
+        page
+          .on('console', (message) => {
+            consoleMessages.push(message);
+          })
+          .on('pageerror', (error) => {
+            pageErrors.push(error);
+          });
+
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+          waitUntil: 'networkidle0',
+        });
+
+        expect(
+          consoleMessages.map((message) => message.text()),
+        ).toMatchSnapshot('console messages');
+        expect(pageErrors).toMatchSnapshot('page errors');
+      } finally {
+        proxy.close();
+
+        await browser.close();
+        await server.stop();
+      }
+    });
+
+    it(`should disconnect web socket client using custom hostname from web socket server with the "auto" value based on the "origin" header ("${webSocketServer}")`, async () => {
+      const devServerHost = '127.0.0.1';
+      const devServerPort = port1;
+      const proxyHost = devServerHost;
+      const proxyPort = port2;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            port: port2,
+          },
+        },
+        webSocketServer,
+        port: devServerPort,
+        host: devServerHost,
+        allowedHosts: 'auto',
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const app = express();
+
+        app.use(
+          '/',
+          createProxyMiddleware({
+            // Emulation
+            onProxyReqWs: (proxyReq) => {
+              proxyReq.setHeader('origin', 'http://my-test-origin.com/');
+            },
+            target: `http://${devServerHost}:${devServerPort}`,
+            ws: true,
+            changeOrigin: true,
+            logLevel: 'warn',
+          }),
+        );
+
+        return app.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      try {
+        const pageErrors = [];
+        const consoleMessages = [];
+
+        page
+          .on('console', (message) => {
+            consoleMessages.push(message);
+          })
+          .on('pageerror', (error) => {
+            pageErrors.push(error);
+          });
+
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+          waitUntil: 'networkidle0',
+        });
+
+        expect(
+          consoleMessages.map((message) => message.text()),
+        ).toMatchSnapshot('console messages');
+        expect(pageErrors).toMatchSnapshot('page errors');
+      } finally {
+        proxy.close();
+
+        await browser.close();
+        await server.stop();
+      }
+    });
+
     it(`should disconnect web client using localhost to web socket server with the "auto" value ("${webSocketServer}")`, async () => {
       const devServerHost = '127.0.0.1';
       const devServerPort = port1;
@@ -1174,6 +1473,84 @@ describe('allowed hosts', () => {
         await server.stop();
       }
     });
+
+    it(`should disconnect web client using origin header containing an IP address with the "auto" value ("${webSocketServer}")`, async () => {
+      const devServerHost = '127.0.0.1';
+      const devServerPort = port1;
+      const proxyHost = devServerHost;
+      const proxyPort = port2;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            port: port2,
+          },
+        },
+        webSocketServer,
+        port: devServerPort,
+        host: devServerHost,
+        allowedHosts: ['192.168.1.1'],
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const app = express();
+
+        app.use(
+          '/',
+          createProxyMiddleware({
+            // Emulation
+            onProxyReqWs: (proxyReq) => {
+              proxyReq.setHeader('origin', 'http://192.168.0.1/');
+            },
+            target: `http://${devServerHost}:${devServerPort}`,
+            ws: true,
+            changeOrigin: true,
+            logLevel: 'warn',
+          }),
+        );
+
+        return app.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      try {
+        const pageErrors = [];
+        const consoleMessages = [];
+
+        page
+          .on('console', (message) => {
+            consoleMessages.push(message);
+          })
+          .on('pageerror', (error) => {
+            pageErrors.push(error);
+          });
+
+        await page.goto(`http://${proxyHost}:${proxyPort}/`, {
+          waitUntil: 'networkidle0',
+        });
+
+        expect(
+          consoleMessages.map((message) => message.text()),
+        ).toMatchSnapshot('(work) console messages');
+        expect(pageErrors).toMatchSnapshot('(work) page errors');
+      } finally {
+        proxy.close();
+
+        await browser.close();
+        await server.stop();
+      }
+    });
   }
 
   describe('check host headers', () => {
@@ -1223,7 +1600,7 @@ describe('allowed hosts', () => {
         waitUntil: 'networkidle0',
       });
 
-      if (!server.checkHeader(headers, 'host')) {
+      if (!server.isValidHost(headers, 'host')) {
         throw new Error("Validation didn't fail");
       }
 
@@ -1264,7 +1641,7 @@ describe('allowed hosts', () => {
         waitUntil: 'networkidle0',
       });
 
-      if (!server.checkHeader(headers, 'host')) {
+      if (!server.isValidHost(headers, 'host')) {
         throw new Error("Validation didn't fail");
       }
 
@@ -1307,7 +1684,7 @@ describe('allowed hosts', () => {
         waitUntil: 'networkidle0',
       });
 
-      if (!server.checkHeader(headers, 'host')) {
+      if (!server.isValidHost(headers, 'host')) {
         throw new Error("Validation didn't fail");
       }
 
@@ -1351,9 +1728,9 @@ describe('allowed hosts', () => {
         waitUntil: 'networkidle0',
       });
 
-      if (!server.checkHeader(headers, 'host')) {
-        throw new Error("Validation didn't fail");
-      }
+      // if (!server.isValidHost(headers, "host")) {
+      //   throw new Error("Validation didn't fail");
+      // }
 
       expect(response.status()).toMatchSnapshot('response status');
 
@@ -1391,7 +1768,7 @@ describe('allowed hosts', () => {
         waitUntil: 'networkidle0',
       });
 
-      if (!server.checkHeader(headers, 'host')) {
+      if (!server.isValidHost(headers, 'host')) {
         throw new Error("Validation didn't fail");
       }
 
@@ -1432,7 +1809,7 @@ describe('allowed hosts', () => {
       for (const test of tests) {
         const headers = { host: test };
 
-        if (!server.checkHeader(headers, 'host')) {
+        if (!server.isValidHost(headers, 'host')) {
           throw new Error("Validation didn't fail");
         }
       }
@@ -1482,7 +1859,7 @@ describe('allowed hosts', () => {
       for (const test of tests) {
         const headers = { host: test };
 
-        if (!server.checkHeader(headers, 'host')) {
+        if (!server.isValidHost(headers, 'host')) {
           throw new Error("Validation didn't fail");
         }
       }