fix: use location.port when location.hostname is used to infer HMR socket URL (#1664)

Author: rlamana

client-src/default/index.js

@@ -181,6 +181,7 @@ const onSocketMsg = {
 
 let hostname = urlParts.hostname;
 let protocol = urlParts.protocol;
+let port = urlParts.port;
 
 // check ipv4 and ipv6 `all hostname`
 if (hostname === '0.0.0.0' || hostname === '::') {
@@ -190,6 +191,7 @@ if (hostname === '0.0.0.0' || hostname === '::') {
   // eslint-disable-next-line no-bitwise
   if (self.location.hostname && !!~self.location.protocol.indexOf('http')) {
     hostname = self.location.hostname;
+    port = self.location.port;
   }
 }
 
@@ -208,7 +210,7 @@ const socketUrl = url.format({
   protocol,
   auth: urlParts.auth,
   hostname,
-  port: urlParts.port,
+  port,
   // If sockPath is provided it'll be passed in via the __resourceQuery as a
   // query param so it has to be parsed out of the querystring in order for the
   // client to open the socket to the correct location.

package-lock.json

@@ -82,6 +82,7 @@
     "marked": "^0.6.1",
     "nyc": "^13.3.0",
     "prettier": "^1.16.3",
+    "puppeteer": "^1.12.2",
     "rimraf": "^2.6.2",
     "standard-version": "^5.0.0",
     "style-loader": "^0.23.1",

package.json

@@ -0,0 +1,75 @@
+'use strict';
+
+const express = require('express');
+const httpProxy = require('http-proxy-middleware');
+const request = require('supertest');
+const addEntries = require('../lib/utils/addEntries');
+const helper = require('./helper');
+const config = require('./fixtures/client-config/webpack.config');
+const runBrowser = require('./helpers/run-browser');
+
+function startProxy(port) {
+  const proxy = express();
+  proxy.use(
+    '/',
+    httpProxy({
+      target: 'http://localhost:9001',
+      ws: true,
+      changeOrigin: true,
+    })
+  );
+  return proxy.listen(port);
+}
+
+describe('Client code', () => {
+  beforeAll((done) => {
+    const options = {
+      compress: true,
+      port: 9001,
+      host: '0.0.0.0',
+      disableHostCheck: true,
+      hot: true,
+      watchOptions: {
+        poll: true,
+      },
+    };
+    addEntries(config, options);
+    helper.start(config, options, done);
+  });
+
+  afterAll(helper.close);
+
+  describe('behind a proxy', () => {
+    let proxy;
+
+    jest.setTimeout(30000);
+
+    beforeAll(() => {
+      proxy = startProxy(9000);
+    });
+
+    afterAll(() => {
+      proxy.close();
+    });
+
+    it('responds with a 200', (done) => {
+      const req = request('http://localhost:9000');
+      req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
+    });
+
+    it('requests websocket through the proxy with proper port number', (done) => {
+      runBrowser().then(({ page, browser }) => {
+        page
+          .waitForRequest((requestObj) => requestObj.url().match(/sockjs-node/))
+          .then((requestObj) => {
+            expect(requestObj.url()).toMatch(
+              /^http:\/\/localhost:9000\/sockjs-node/
+            );
+            browser.close();
+            done();
+          });
+        page.goto('http://localhost:9000/main');
+      });
+    });
+  });
+});

test/Client.test.js

@@ -0,0 +1,3 @@
+'use strict';
+
+console.log('Hey.');

test/fixtures/client-config/foo.js

@@ -0,0 +1 @@
+<script src="index.js"></script>

test/fixtures/client-config/index.html

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+  mode: 'development',
+  context: __dirname,
+  entry: './foo.js',
+  output: {
+    path: '/',
+  },
+};

test/fixtures/client-config/webpack.config.js

@@ -14,7 +14,9 @@ module.exports = {
     const compiler = webpack(config);
     server = new Server(compiler, options);
 
-    server.listen(8080, 'localhost', (err) => {
+    const port = options.port || 8080;
+    const host = options.host || 'localhost';
+    server.listen(port, host, (err) => {
       if (err) return done(err);
       done();
     });

test/helper.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+function runBrowser(config) {
+  const options = {
+    viewport: {
+      width: 500,
+      height: 500,
+    },
+    userAgent: '',
+    ...config,
+  };
+
+  return new Promise((resolve, reject) => {
+    let page;
+    let browser;
+
+    puppeteer
+      .launch({
+        headless: true,
+        args: ['--no-sandbox', '--disable-setuid-sandbox'],
+      })
+      .then((launchedBrowser) => {
+        browser = launchedBrowser;
+        return browser.newPage();
+      })
+      .then((newPage) => {
+        page = newPage;
+        page.emulate(options);
+        resolve({ page, browser });
+      })
+      .catch(reject);
+  });
+}
+
+module.exports = runBrowser;