feat(dev-server): pick up scheme and host from forwarding proxy. (#2492)

ionic-team · Jul 22, 2020 · 3be1d72 · 3be1d72
1 parent d0176c9
commit 3be1d72
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/dev-server/dev-server-utils.ts b/src/dev-server/dev-server-utils.ts
@@ -77,7 +77,7 @@ export function getBrowserUrl(protocol: string, address: string, port: number, b
   return `${protocol}://${address}${portSuffix}${path}`;
 }
 
-export function getDevServerClientUrl(devServerConfig: d.DevServerConfig, host: string) {
+export function getDevServerClientUrl(devServerConfig: d.DevServerConfig, host: string, protocol: string) {
   let address = devServerConfig.address;
   let port = devServerConfig.port;
 
@@ -86,7 +86,7 @@ export function getDevServerClientUrl(devServerConfig: d.DevServerConfig, host:
     port = null;
   }
 
-  return getBrowserUrl(devServerConfig.protocol, address, port, devServerConfig.basePath, c.DEV_SERVER_URL);
+  return getBrowserUrl(protocol ?? devServerConfig.protocol, address, port, devServerConfig.basePath, c.DEV_SERVER_URL);
 }
 
 export function getContentType(devServerConfig: d.DevServerConfig, filePath: string) {

diff --git a/src/dev-server/serve-file.ts b/src/dev-server/serve-file.ts
@@ -120,7 +120,7 @@ function updateStyleUrls(cssUrl: string, oldCss: string) {
 const urlVersionIds = new Map<string, string>();
 
 function appendDevServerClientScript(devServerConfig: d.DevServerConfig, req: d.HttpRequest, content: string) {
-  const devServerClientUrl = util.getDevServerClientUrl(devServerConfig, req.host);
+  const devServerClientUrl = util.getDevServerClientUrl(devServerConfig, req.headers?.['x-forwarded-host'] ?? req.host, req.headers?.['x-forwarded-proto']);
   const iframe = `<iframe title="Stencil Dev Server Connector ${version} &#9889;" src="${devServerClientUrl}" style="display:block;width:0;height:0;border:0;visibility:hidden" aria-hidden="true"></iframe>`;
   return appendDevServerClientIframe(content, iframe);
 }

diff --git a/src/dev-server/test/util.spec.ts b/src/dev-server/test/util.spec.ts
@@ -65,15 +65,29 @@ describe('dev-server, util', () => {
 });
 
 describe('getDevServerClientUrl', () => {
-  it('should get path for dev server w/ host w/ port', () => {
+  it('should get path for dev server w/ host w/ port w/ protocol', () => {
     const devServerConfig: d.DevServerConfig = {
       protocol: 'http',
       address: '0.0.0.0',
       port: 3333,
       basePath: '/my-base-url/',
     };
+    const proto = 'https';
     const host = 'staging.stenciljs:5555.com';
-    const url = getDevServerClientUrl(devServerConfig, host);
+    const url = getDevServerClientUrl(devServerConfig, host, proto);
+    expect(url).toBe(`https://staging.stenciljs:5555.com/my-base-url${DEV_SERVER_URL}`);
+  });
+
+  it('should get path for dev server w/ host w/ port no protocol', () => {
+    const devServerConfig: d.DevServerConfig = {
+      protocol: 'http',
+      address: '0.0.0.0',
+      port: 3333,
+      basePath: '/my-base-url/',
+    };
+    const proto: string = null;
+    const host = 'staging.stenciljs:5555.com';
+    const url = getDevServerClientUrl(devServerConfig, host, proto);
     expect(url).toBe(`http://staging.stenciljs:5555.com/my-base-url${DEV_SERVER_URL}`);
   });
 
@@ -84,8 +98,9 @@ describe('getDevServerClientUrl', () => {
       port: 3333,
       basePath: '/my-base-url/',
     };
+    const proto: string = null;
     const host = 'staging.stenciljs.com';
-    const url = getDevServerClientUrl(devServerConfig, host);
+    const url = getDevServerClientUrl(devServerConfig, host, proto);
     expect(url).toBe(`http://staging.stenciljs.com/my-base-url${DEV_SERVER_URL}`);
   });
 
@@ -96,8 +111,9 @@ describe('getDevServerClientUrl', () => {
       port: 3333,
       basePath: '/my-base-url/',
     };
+    const proto: string = null;
     const host: string = null;
-    const url = getDevServerClientUrl(devServerConfig, host);
+    const url = getDevServerClientUrl(devServerConfig, host, proto);
     expect(url).toBe(`http://localhost:3333/my-base-url${DEV_SERVER_URL}`);
   });
 
@@ -107,8 +123,9 @@ describe('getDevServerClientUrl', () => {
       address: '0.0.0.0',
       basePath: '/my-base-url/',
     };
+    const proto: string = null;
     const host: string = null;
-    const url = getDevServerClientUrl(devServerConfig, host);
+    const url = getDevServerClientUrl(devServerConfig, host, proto);
     expect(url).toBe(`${devServerConfig.protocol}://localhost/my-base-url${DEV_SERVER_URL}`);
   });
 
@@ -119,8 +136,9 @@ describe('getDevServerClientUrl', () => {
       port: 3333,
       basePath: '/my-base-url/',
     };
+    const proto: string = null;
     const host: string = null;
-    const url = getDevServerClientUrl(devServerConfig, host);
+    const url = getDevServerClientUrl(devServerConfig, host, proto);
     expect(url).toBe(`${devServerConfig.protocol}://${devServerConfig.address}:3333/my-base-url${DEV_SERVER_URL}`);
   });
 });