SHIBUI-2552: Fixed issue with non-root context in UI

TIER · Mar 31, 2023 · 3bef2b4 · 3bef2b4
1 parent 17bf81e
commit 3bef2b4
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 15 deletions.
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -4,7 +4,7 @@
     <title>Shibboleth IDP UI</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <base href="/">
+    <base href="%PUBLIC_URL%/">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="icon" type="image/png" sizes="96x96" href="assets/favicon-96x96.png">
   </head>

diff --git a/ui/src/app/App.router.js b/ui/src/app/App.router.js
@@ -413,5 +413,5 @@ export const router = createBrowserRouter([
         ]
     }
 ], {
-    basename: BASE_PATH
+    basename: `/${BASE_PATH}`
 });
diff --git a/ui/src/app/core/components/VersionInfo.js b/ui/src/app/core/components/VersionInfo.js
@@ -16,7 +16,7 @@ export function VersionInfo () {
             'mode':'no-cors'
         }
     }
-    const { data = {} } = useFetch(`${ACTUATOR_PATH}/info`, opts, []);
+    const { data = {} } = useFetch(`${ACTUATOR_PATH}info`, opts, []);
 
     const [ versionData, setVersionData ] = React.useState('');
 

diff --git a/ui/src/app/store/baseQuery.js b/ui/src/app/store/baseQuery.js
@@ -3,7 +3,7 @@ import API_BASE_PATH from '../App.constant';
 import { get_cookie } from '../core/utility/get_cookie';
 
 export const getBaseQuery = (config = {}) => fetchBaseQuery({
-    baseUrl: `${API_BASE_PATH}`,
+    baseUrl: `/${API_BASE_PATH}`,
     prepareHeaders: (headers) => {
         const token = get_cookie('XSRF-TOKEN');
 

diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js
@@ -1,42 +1,62 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 
+
+
 module.exports = function (app) {
 
     const port = 8080;
+    const context = process.env.PUBLIC_URL;
+
+    const rewriteFn = function (path, req) {
+        return path.replace(context, '');
+    };
 
     app.use(
-        '/api',
+        `${context}/api`,
         createProxyMiddleware({
-            target: `http://localhost:${port}`,
+            target: `http://localhost:${port}${context}/`,
             changeOrigin: true,
+            pathRewrite: rewriteFn,
             onProxyRes: function (proxyRes, req, res) {
                 proxyRes.headers['Access-Control-Allow-Origin'] = '*';
             }
         })
     );
 
     app.use(
-        '/actuator',
+        `${context}/actuator`,
+        createProxyMiddleware({
+            target: `http://localhost:${port}${context}/`,
+            changeOrigin: true,
+            pathRewrite: rewriteFn,
+        })
+    );
+
+    app.use(
+        `${context}/login`,
         createProxyMiddleware({
-            target: `http://localhost:${port}`,
-            changeOrigin: true
+            target: `http://localhost:${port}${context}/`,
+            changeOrigin: true,
+            pathRewrite: rewriteFn,
         })
     );
 
     app.use(
-        '/login',
+        `${context}/info`,
         createProxyMiddleware({
-            target: `http://localhost:${port}`,
-            changeOrigin: true
+            target: `http://localhost:${port}${context}/`,
+            changeOrigin: true,
+            pathRewrite: rewriteFn,
         })
     );
 
     app.use(
-        '/logout',
+        `${context}/logout`,
         createProxyMiddleware({
-            target: `http://localhost:${port}`,
-            changeOrigin: true
+            target: `http://localhost:${port}${context}/`,
+            changeOrigin: true,
+            pathRewrite: rewriteFn,
         })
     );
 };