[stable-4.9] webpack dev: Change to API_PROXY instead of API_PROXY_HO…

…ST & API_PROXY_PORT (#5381) (#5404)

* Change to API_PROXY=http://localhost:5001 instead of API_PROXY_HOST & API_PROXY_PORT (#5381)

to allow running against https backends

and ignore self-signed https certificates,
and spoof the Origin, Host & Referer headers correctly

(cherry picked from commit 7b57440)

* fixup webpack config

README.md

@@ -54,6 +54,8 @@ cd ansible-hub-ui
 npm run start-standalone
 ```
 
+(Or `API_PROXY=http://localhost:5001 npm run start-standalone`; run `API_PROXY=https://my-server.example.com npm run start-standalone` to run with external backend.)
+
 Standalone mode only requires a running instance of the galaxy API for the UI to connect to.
 
 

config/standalone.dev.webpack.config.js

@@ -1,8 +1,8 @@
-const webpackBase = require('./webpack.base.config');
+const { webpackBase, proxy } = require('./webpack.base.config');
 
 // Used for getting the correct host when running in a container
-const proxyHost = process.env.API_PROXY_HOST || 'localhost';
-const proxyPort = process.env.API_PROXY_PORT || '55001';
+const proxyTarget = process.env.API_PROXY || 'http://localhost:55001';
+
 const apiBasePath = process.env.API_BASE_PATH || '/api/galaxy/';
 const uiExternalLoginURI = process.env.UI_EXTERNAL_LOGIN_URI || '/login';
 
@@ -28,11 +28,11 @@ module.exports = webpackBase({
   // Value for webpack.devServer.proxy
   // https://webpack.js.org/configuration/dev-server/#devserverproxy
   // used to get around CORS requirements when running in dev mode
-  WEBPACK_PROXY: {
-    '/api/': `http://${proxyHost}:${proxyPort}`,
-    '/pulp/api/': `http://${proxyHost}:${proxyPort}`,
-    '/v2/': `http://${proxyHost}:${proxyPort}`,
-    '/extensions/v2/': `http://${proxyHost}:${proxyPort}`,
-    '/static/rest_framework/': `http://${proxyHost}:${proxyPort}`,
-  },
+  WEBPACK_PROXY: [
+    proxy('/api/', proxyTarget),
+    proxy('/pulp/api/', proxyTarget),
+    proxy('/v2/', proxyTarget),
+    proxy('/extensions/v2/', proxyTarget),
+    proxy('/static/rest_framework/', proxyTarget),
+  ],
 });

config/standalone.prod.webpack.config.js

@@ -1,4 +1,4 @@
-const webpackBase = require('./webpack.base.config');
+const { webpackBase } = require('./webpack.base.config');
 
 // Compile configuration for stnadalone mode
 module.exports = webpackBase({

config/webpack.base.config.js

@@ -41,7 +41,21 @@ const defaultConfigs = [
   { name: 'WEBPACK_PUBLIC_PATH', default: undefined, scope: 'webpack' },
 ];
 
-module.exports = (inputConfigs) => {
+const proxy = (route, target) => {
+  const u = new URL(target);
+  return {
+    context: [route],
+    target,
+    secure: false,
+    router: (req) => {
+      req.headers.host = u.host;
+      req.headers.origin = u.origin;
+      req.headers.referer = u.href;
+    },
+  };
+};
+
+const webpackBase = (inputConfigs) => {
   const customConfigs = {};
   const globals = {};
 
@@ -82,12 +96,7 @@ module.exports = (inputConfigs) => {
                 }`,
               ),
             port: customConfigs.UI_PORT,
-            proxy: Object.entries(customConfigs.WEBPACK_PROXY).map(
-              ([k, v]) => ({
-                context: [k],
-                target: v,
-              }),
-            ),
+            proxy: customConfigs.WEBPACK_PROXY,
             server: { type: customConfigs.UI_USE_HTTPS ? 'https' : 'http' },
             static: { directory: resolve(__dirname, '../dist') },
           },
@@ -167,3 +176,8 @@ module.exports = (inputConfigs) => {
     },
   };
 };
+
+module.exports = {
+  proxy,
+  webpackBase,
+};