diff --git a/webui/config.yaml b/webui/config.yaml
index 2963931..461b1b6 100644
--- a/webui/config.yaml
+++ b/webui/config.yaml
@@ -1,3 +1,3 @@
  # Set up the IpAddress with port for the cfm-service to be connected
 api:
-  base_path: "http://127.0.0.1:8080"
\ No newline at end of file
+  base_path: "https://127.0.0.1:8080"
\ No newline at end of file
diff --git a/webui/src/components/Common/Helpers.vue b/webui/src/components/Common/Helpers.vue
index 52c5a0c..89d573a 100644
--- a/webui/src/components/Common/Helpers.vue
+++ b/webui/src/components/Common/Helpers.vue
@@ -1,8 +1,11 @@
 <!-- Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates -->
-<script>
+<script lang="ts">
+// Make the API calls in the web UI are prefixed with /api to match the proxy configuration
+export const API_BASE_PATH = "/api";
+
 export default {
   methods: {
-    getColor(item) {
+    getColor(item: string) {
       if (
         item === "Successful" ||
         item === "Success" ||
diff --git a/webui/src/components/Stores/ApplianceStore.ts b/webui/src/components/Stores/ApplianceStore.ts
index 219a404..c4c7424 100644
--- a/webui/src/components/Stores/ApplianceStore.ts
+++ b/webui/src/components/Stores/ApplianceStore.ts
@@ -6,11 +6,9 @@ import {
   DefaultApi,
   DiscoveredDevice,
 } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
 import axios from "axios";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useApplianceStore = defineStore("appliance", {
   state: () => ({
diff --git a/webui/src/components/Stores/BladeMemoryStore.ts b/webui/src/components/Stores/BladeMemoryStore.ts
index 6c1e993..8ef9419 100644
--- a/webui/src/components/Stores/BladeMemoryStore.ts
+++ b/webui/src/components/Stores/BladeMemoryStore.ts
@@ -1,11 +1,9 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { MemoryRegion, DefaultApi, ComposeMemoryRequest, AssignMemoryRequest } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
 import axios from 'axios';
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useBladeMemoryStore = defineStore('bladeMemory', {
     state: () => ({
diff --git a/webui/src/components/Stores/BladePortStore.ts b/webui/src/components/Stores/BladePortStore.ts
index 8dec6e5..fd6d4b8 100644
--- a/webui/src/components/Stores/BladePortStore.ts
+++ b/webui/src/components/Stores/BladePortStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { PortInformation, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useBladePortStore = defineStore('bladePort', {
     state: () => ({
diff --git a/webui/src/components/Stores/BladeResourceStore.ts b/webui/src/components/Stores/BladeResourceStore.ts
index d490b6b..0bf1d13 100644
--- a/webui/src/components/Stores/BladeResourceStore.ts
+++ b/webui/src/components/Stores/BladeResourceStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { MemoryResourceBlock, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useBladeResourceStore = defineStore('bladeResource', {
     state: () => ({
diff --git a/webui/src/components/Stores/BladeStore.ts b/webui/src/components/Stores/BladeStore.ts
index 5ff77e4..c47012d 100644
--- a/webui/src/components/Stores/BladeStore.ts
+++ b/webui/src/components/Stores/BladeStore.ts
@@ -1,10 +1,9 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { Blade, Credentials, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
 import axios from 'axios';
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useBladeStore = defineStore('blade', {
     state: () => ({
diff --git a/webui/src/components/Stores/HostMemoryDeviceStore.ts b/webui/src/components/Stores/HostMemoryDeviceStore.ts
index c5370b3..1a5e91e 100644
--- a/webui/src/components/Stores/HostMemoryDeviceStore.ts
+++ b/webui/src/components/Stores/HostMemoryDeviceStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { MemoryDeviceInformation, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useHostMemoryDeviceStore = defineStore('hostMemoryDevices', {
     state: () => ({
diff --git a/webui/src/components/Stores/HostMemoryStore.ts b/webui/src/components/Stores/HostMemoryStore.ts
index 1cdefa3..0abd23f 100644
--- a/webui/src/components/Stores/HostMemoryStore.ts
+++ b/webui/src/components/Stores/HostMemoryStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { MemoryRegion, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useHostMemoryStore = defineStore('hostMemory', {
     state: () => ({
diff --git a/webui/src/components/Stores/HostPortStore.ts b/webui/src/components/Stores/HostPortStore.ts
index 671d3e2..69ea1d5 100644
--- a/webui/src/components/Stores/HostPortStore.ts
+++ b/webui/src/components/Stores/HostPortStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { PortInformation, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useHostPortStore = defineStore('hostPort', {
     state: () => ({
diff --git a/webui/src/components/Stores/HostStore.ts b/webui/src/components/Stores/HostStore.ts
index 94ddc11..79f804f 100644
--- a/webui/src/components/Stores/HostStore.ts
+++ b/webui/src/components/Stores/HostStore.ts
@@ -1,11 +1,9 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from "pinia";
 import { Host, Credentials, DefaultApi, DiscoveredDevice } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
 import axios from "axios";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useHostStore = defineStore("host", {
   state: () => ({
diff --git a/webui/src/components/Stores/ServiceStore.ts b/webui/src/components/Stores/ServiceStore.ts
index bd9efdb..b8672fa 100644
--- a/webui/src/components/Stores/ServiceStore.ts
+++ b/webui/src/components/Stores/ServiceStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
 import { DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useServiceStore = defineStore('cfm-service', {
     state: () => ({
diff --git a/webui/vite.config.ts b/webui/vite.config.ts
index acaca00..59a6419 100644
--- a/webui/vite.config.ts
+++ b/webui/vite.config.ts
@@ -63,5 +63,19 @@ export default defineConfig({
       key: fs.existsSync(path.resolve(__dirname, 'incoming/key.pem')) ? fs.readFileSync(path.resolve(__dirname, 'incoming/key.pem')) : undefined,
       cert: fs.existsSync(path.resolve(__dirname, 'incoming/cert.pem')) ? fs.readFileSync(path.resolve(__dirname, 'incoming/cert.pem')) : undefined
     },
+    proxy: {
+      '/api': {
+        target: parsedConfig.api.base_path,
+        secure: false, // This will ignore the self-signed certificate
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+        configure: (proxy) => {
+          proxy.on('proxyRes', (proxyRes) => {
+            // Remove the strict-transport-security header
+            delete proxyRes.headers['strict-transport-security'];
+          });
+        },
+      },
+    },
   },
 })