diff --git a/login.lp b/login.lp
index f97b837f..13497d0a 100644
--- a/login.lp
+++ b/login.lp
@@ -117,7 +117,8 @@ mg.include('scripts/lua/header.lp','r')
         <strong><a href="https://pi-hole.net/donate/" rel="noopener" target="_blank"><i class="fa fa-heart text-red"></i> Donate</a></strong> if you found this useful.
     </div>
 </div>
-<script src="<?=pihole.fileversion('scripts/js/login.js')?>"></script>
+<div id="api-url" style="display: none;"><?=pihole.api_url()?></div>
 <script src="<?=pihole.fileversion('scripts/js/footer.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/login.js')?>"></script>
 </body>
 </html>
diff --git a/scripts/js/footer.js b/scripts/js/footer.js
index 63197d35..930756da 100644
--- a/scripts/js/footer.js
+++ b/scripts/js/footer.js
@@ -7,8 +7,8 @@
 
 /* global utils:false, moment:false */
 
-//The following functions allow us to display time until pi-hole is enabled after disabling.
-//Works between all pages
+var _isLoginPage = false;
+const apiUrl = document.getElementById("api-url").textContent;
 
 const REFRESH_INTERVAL = {
   logs: 500, // 0.5 sec (logs page)
@@ -115,7 +115,7 @@ function checkBlocking() {
   }
 
   $.ajax({
-    url: "/api/dns/blocking",
+    url: apiUrl + "/dns/blocking",
     method: "GET",
   })
     .done(function (data) {
@@ -144,7 +144,7 @@ function piholeChange(action, duration) {
 
   btnStatus.html("<i class='fa fa-spinner fa-spin'> </i>");
   $.ajax({
-    url: "/api/dns/blocking",
+    url: apiUrl + "/dns/blocking",
     method: "POST",
     dataType: "json",
     processData: false,
@@ -267,7 +267,7 @@ function updateQueryFrequency(intl, frequency) {
 var ftlinfoTimer = null;
 function updateFtlInfo() {
   $.ajax({
-    url: "/api/info/ftl",
+    url: apiUrl + "/info/ftl",
   })
     .done(function (data) {
       var ftl = data.ftl;
@@ -324,7 +324,7 @@ function updateFtlInfo() {
 
 function updateSystemInfo() {
   $.ajax({
-    url: "/api/info/system",
+    url: apiUrl + "/info/system",
   })
     .done(function (data) {
       var system = data.system;
@@ -474,7 +474,7 @@ function versionCompare(v1, v2) {
 
 function updateVersionInfo() {
   $.ajax({
-    url: "/api/info/version",
+    url: apiUrl + "/info/version",
   }).done(function (data) {
     var version = data.version;
     var updateAvailable = false;
@@ -609,7 +609,7 @@ function updateVersionInfo() {
 }
 
 $(function () {
-  if (globalThis.location.pathname !== "/admin/login") updateInfo();
+  if (!_isLoginPage) updateInfo();
   var enaT = $("#enableTimer");
   var target = new Date(parseInt(enaT.html(), 10));
   var seconds = Math.round((target.getTime() - Date.now()) / 1000);
@@ -624,7 +624,7 @@ $(function () {
   // Apply per-browser styling settings
   initCheckboxRadioStyle();
 
-  if (globalThis.location.pathname !== "/admin/login") {
+  if (!_isLoginPage) {
     // Run check immediately after page loading ...
     utils.checkMessages();
     // ... and then periodically
diff --git a/scripts/js/gravity.js b/scripts/js/gravity.js
index 26573246..9f5b66cb 100644
--- a/scripts/js/gravity.js
+++ b/scripts/js/gravity.js
@@ -4,6 +4,7 @@
  *
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
+/* global apiUrl: false */
 
 function eventsource() {
   var alInfo = $("#alInfo");
@@ -24,7 +25,7 @@ function eventsource() {
   alSuccess.hide();
 
   // eslint-disable-next-line compat/compat
-  fetch("/api/action/gravity", {
+  fetch(apiUrl + "/action/gravity", {
     method: "POST",
     headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
   })
diff --git a/scripts/js/groups-clients.js b/scripts/js/groups-clients.js
index 791de55f..adf1a96c 100644
--- a/scripts/js/groups-clients.js
+++ b/scripts/js/groups-clients.js
@@ -5,14 +5,14 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, groups:false,, apiFailure:false, updateFtlInfo:false, getGroups:false, processGroupResult:false, delGroupItems:false */
+/* global utils:false, apiUrl:false, groups:false,, apiFailure:false, updateFtlInfo:false, getGroups:false, processGroupResult:false, delGroupItems:false */
 /* exported initTable */
 
 var table;
 
 function reloadClientSuggestions() {
   $.ajax({
-    url: "/api/clients/_suggestions",
+    url: apiUrl + "/clients/_suggestions",
     type: "GET",
     dataType: "json",
     success: function (data) {
@@ -96,7 +96,7 @@ function initTable() {
   table = $("#clientsTable").DataTable({
     processing: true,
     ajax: {
-      url: "/api/clients",
+      url: apiUrl + "/clients",
       dataSrc: "clients",
       type: "GET",
     },
@@ -402,7 +402,7 @@ function addClient() {
   }
 
   $.ajax({
-    url: "/api/clients",
+    url: apiUrl + "/clients",
     method: "post",
     dataType: "json",
     processData: false,
@@ -459,7 +459,7 @@ function editClient() {
   const clientDecoded = utils.hexDecode(client);
   utils.showAlert("info", "", "Editing client...", clientDecoded);
   $.ajax({
-    url: "/api/clients/" + encodeURIComponent(clientDecoded),
+    url: apiUrl + "/clients/" + encodeURIComponent(clientDecoded),
     method: "put",
     dataType: "json",
     processData: false,
diff --git a/scripts/js/groups-common.js b/scripts/js/groups-common.js
index e32ef189..73850d6d 100644
--- a/scripts/js/groups-common.js
+++ b/scripts/js/groups-common.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global apiFailure:false, utils:false, initTable:false, updateFtlInfo:false */
+/* global apiFailure:false, utils:false, apiUrl:false, initTable:false, updateFtlInfo:false */
 
 var groups = [];
 
@@ -39,7 +39,7 @@ function populateGroupSelect(selectEl) {
 // eslint-disable-next-line no-unused-vars
 function getGroups(groupSelector) {
   $.ajax({
-    url: "/api/groups",
+    url: apiUrl + "/groups",
     type: "GET",
     dataType: "json",
     success: function (data) {
@@ -79,7 +79,7 @@ function delGroupItems(type, ids, table, listType = undefined) {
   // Check input validity
   if (!Array.isArray(ids)) return;
 
-  const url = "/api/" + type + "s:batchDelete";
+  const url = apiUrl + "/" + type + "s:batchDelete";
 
   // use utils.hexDecode() to decode all clients
   let idstring = "";
diff --git a/scripts/js/groups-domains.js b/scripts/js/groups-domains.js
index 8ffc2054..a4fd7aa1 100644
--- a/scripts/js/groups-domains.js
+++ b/scripts/js/groups-domains.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, groups:false,, getGroups:false, updateFtlInfo:false, apiFailure:false, processGroupResult:false, delGroupItems:false */
+/* global utils:false, apiUrl:false, groups:false,, getGroups:false, updateFtlInfo:false, apiFailure:false, processGroupResult:false, delGroupItems:false */
 /* exported initTable */
 
 var table;
@@ -97,7 +97,7 @@ function initTable() {
   table = $("#domainsTable").DataTable({
     processing: true,
     ajax: {
-      url: "/api/domains",
+      url: apiUrl + "/domains",
       dataSrc: "domains",
       type: "GET",
     },
@@ -511,7 +511,7 @@ function addDomain() {
   const type = action === "add_deny" ? "deny" : "allow";
 
   $.ajax({
-    url: "/api/domains/" + type + "/" + kind,
+    url: apiUrl + "/domains/" + type + "/" + kind,
     method: "post",
     dataType: "json",
     processData: false,
@@ -600,7 +600,7 @@ function editDomain() {
   const domainDecoded = utils.hexDecode(domain.split("_")[0]);
   utils.showAlert("info", "", "Editing domain...", domainDecoded);
   $.ajax({
-    url: "/api/domains/" + newTypestr + "/" + encodeURIComponent(domainDecoded),
+    url: apiUrl + "/domains/" + newTypestr + "/" + encodeURIComponent(domainDecoded),
     method: "put",
     dataType: "json",
     processData: false,
diff --git a/scripts/js/groups-lists.js b/scripts/js/groups-lists.js
index f66145c6..b5646c06 100644
--- a/scripts/js/groups-lists.js
+++ b/scripts/js/groups-lists.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, groups:false, apiFailure:false, updateFtlInfo:false, getGroups:false, processGroupResult:false, delGroupItems:false */
+/* global utils:false, apiUrl:false, groups:false, apiFailure:false, updateFtlInfo:false, getGroups:false, processGroupResult:false, delGroupItems:false */
 /* exported initTable */
 
 var table;
@@ -170,7 +170,7 @@ function initTable() {
   table = $("#listsTable").DataTable({
     processing: true,
     ajax: {
-      url: "/api/lists",
+      url: apiUrl + "/lists",
       dataSrc: "lists",
       type: "GET",
     },
@@ -519,7 +519,7 @@ function addList(event) {
   }
 
   $.ajax({
-    url: "/api/lists",
+    url: apiUrl + "/lists",
     method: "post",
     dataType: "json",
     processData: false,
@@ -588,7 +588,7 @@ function editList() {
   utils.disableAll();
   utils.showAlert("info", "", "Editing address...", address);
   $.ajax({
-    url: "/api/lists/" + encodeURIComponent(address) + "?type=" + type,
+    url: apiUrl + "/lists/" + encodeURIComponent(address) + "?type=" + type,
     method: "put",
     dataType: "json",
     processData: false,
diff --git a/scripts/js/groups.js b/scripts/js/groups.js
index d886aee2..dc69c3e6 100644
--- a/scripts/js/groups.js
+++ b/scripts/js/groups.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, apiFailure:false, updateFtlInfo:false, processGroupResult:false, delGroupItems:false */
+/* global utils:false, apiUrl:false, apiFailure:false, updateFtlInfo:false, processGroupResult:false, delGroupItems:false */
 
 var table;
 
@@ -26,7 +26,7 @@ $(function () {
   table = $("#groupsTable").DataTable({
     processing: true,
     ajax: {
-      url: "/api/groups",
+      url: apiUrl + "/groups",
       error: handleAjaxError,
       dataSrc: "groups",
       type: "GET",
@@ -261,7 +261,7 @@ function addGroup() {
   }
 
   $.ajax({
-    url: "/api/groups",
+    url: apiUrl + "/groups",
     method: "post",
     dataType: "json",
     processData: false,
@@ -329,7 +329,7 @@ function editGroup() {
   utils.disableAll();
   utils.showAlert("info", "", "Editing group...", oldName);
   $.ajax({
-    url: "/api/groups/" + oldName,
+    url: apiUrl + "/groups/" + oldName,
     method: "put",
     dataType: "json",
     processData: false,
diff --git a/scripts/js/index.js b/scripts/js/index.js
index 749bdb31..53128623 100644
--- a/scripts/js/index.js
+++ b/scripts/js/index.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, Chart:false, apiFailure:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false, REFRESH_INTERVAL: false, updateQueryFrequency: false */
+/* global utils:false, apiUrl:false, Chart:false, apiFailure:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false, REFRESH_INTERVAL: false, updateQueryFrequency: false */
 
 // Define global variables
 var timeLineChart, clientsChart;
@@ -22,7 +22,7 @@ Chart.defaults.set("plugins.deferred", {
 
 var failures = 0;
 function updateQueriesOverTime() {
-  $.getJSON("/api/history", function (data) {
+  $.getJSON(apiUrl + "/history", function (data) {
     // Remove graph if there are no results (e.g. new
     // installation or privacy mode enabled)
     if (jQuery.isEmptyObject(data.history)) {
@@ -92,7 +92,7 @@ function updateQueriesOverTime() {
 }
 
 function updateQueryTypesPie() {
-  $.getJSON("/api/stats/query_types", function (data) {
+  $.getJSON(apiUrl + "/stats/query_types", function (data) {
     var v = [],
       c = [],
       k = [],
@@ -134,7 +134,7 @@ function updateQueryTypesPie() {
 }
 
 function updateClientsOverTime() {
-  $.getJSON("/api/history/clients", function (data) {
+  $.getJSON(apiUrl + "/history/clients", function (data) {
     // Remove graph if there are no results (e.g. new
     // installation or privacy mode enabled)
     if (jQuery.isEmptyObject(data.history)) {
@@ -212,7 +212,7 @@ function updateClientsOverTime() {
 
 var upstreams = {};
 function updateForwardDestinationsPie() {
-  $.getJSON("/api/stats/upstreams", function (data) {
+  $.getJSON(apiUrl + "/stats/upstreams", function (data) {
     var v = [],
       c = [],
       k = [],
@@ -273,13 +273,13 @@ function updateForwardDestinationsPie() {
 function updateTopClientsTable(blocked) {
   let api, style, tablecontent, overlay, clienttable;
   if (blocked) {
-    api = "/api/stats/top_clients?blocked=true";
+    api = apiUrl + "/stats/top_clients?blocked=true";
     style = "queries-blocked";
     tablecontent = $("#client-frequency-blocked td").parent();
     overlay = $("#client-frequency-blocked .overlay");
     clienttable = $("#client-frequency-blocked").find("tbody:last");
   } else {
-    api = "/api/stats/top_clients";
+    api = apiUrl + "/stats/top_clients";
     style = "queries-permitted";
     tablecontent = $("#client-frequency td").parent();
     overlay = $("#client-frequency .overlay");
@@ -332,13 +332,13 @@ function updateTopClientsTable(blocked) {
 function updateTopDomainsTable(blocked) {
   let api, style, tablecontent, overlay, domaintable;
   if (blocked) {
-    api = "/api/stats/top_domains?blocked=true";
+    api = apiUrl + "/stats/top_domains?blocked=true";
     style = "queries-blocked";
     tablecontent = $("#ad-frequency td").parent();
     overlay = $("#ad-frequency .overlay");
     domaintable = $("#ad-frequency").find("tbody:last");
   } else {
-    api = "/api/stats/top_domains";
+    api = apiUrl + "/stats/top_domains";
     style = "queries-permitted";
     tablecontent = $("#domain-frequency td").parent();
     overlay = $("#domain-frequency .overlay");
@@ -401,7 +401,7 @@ function updateTopLists() {
 var previousCount = 0;
 var firstSummaryUpdate = true;
 function updateSummaryData(runOnce = false) {
-  $.getJSON("/api/stats/summary", function (data) {
+  $.getJSON(apiUrl + "/stats/summary", function (data) {
     var intl = new Intl.NumberFormat();
     const newCount = parseInt(data.queries.total, 10);
 
diff --git a/scripts/js/interfaces.js b/scripts/js/interfaces.js
index 7091a967..ee5abe09 100644
--- a/scripts/js/interfaces.js
+++ b/scripts/js/interfaces.js
@@ -5,11 +5,11 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils */
+/* global utils: false, apiUrl: false */
 
 $(function () {
   $.ajax({
-    url: "/api/network/gateway",
+    url: apiUrl + "/network/gateway",
     data: { detailed: true },
   }).done(function (data) {
     var intl = new Intl.NumberFormat();
diff --git a/scripts/js/login.js b/scripts/js/login.js
index b30fd5d8..d27191ac 100644
--- a/scripts/js/login.js
+++ b/scripts/js/login.js
@@ -5,7 +5,9 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, NProgress:false */
+/* global utils:false, apiUrl: false, NProgress:false */
+
+var _isLoginPage = true;
 
 function redirect() {
   // Login succeeded or not needed (empty password)
@@ -89,7 +91,7 @@ function doLogin(password) {
   NProgress.start();
   utils.disableAll();
   $.ajax({
-    url: "/api/auth",
+    url: apiUrl + "/auth",
     method: "POST",
     dataType: "json",
     processData: false,
@@ -161,7 +163,7 @@ function showDNSfailure() {
 $(function () {
   // Check if we need to login at all
   $.ajax({
-    url: "/api/auth",
+    url: apiUrl + "/auth",
   })
     .done(function (data) {
       // If we are already logged in, redirect to dashboard
@@ -180,7 +182,7 @@ $(function () {
 
   // Get information about HTTPS port and DNS status
   $.ajax({
-    url: "/api/info/login",
+    url: apiUrl + "/info/login",
   }).done(function (data) {
     if (data.dns === false) showDNSfailure();
 
diff --git a/scripts/js/messages.js b/scripts/js/messages.js
index e97f5cfd..56d50a31 100644
--- a/scripts/js/messages.js
+++ b/scripts/js/messages.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false */
+/* global utils: false, apiUrl: false */
 var table,
   toasts = {};
 
@@ -13,7 +13,7 @@ $(function () {
   var ignoreNonfatal = localStorage
     ? localStorage.getItem("hideNonfatalDnsmasqWarnings_chkbox") === "true"
     : false;
-  var url = "/api/info/messages" + (ignoreNonfatal ? "?filter_dnsmasq_warnings=true" : "");
+  var url = apiUrl + "/info/messages" + (ignoreNonfatal ? "?filter_dnsmasq_warnings=true" : "");
   table = $("#messagesTable").DataTable({
     ajax: {
       url: url,
@@ -157,7 +157,7 @@ function delMsg(id) {
   toasts[id] = utils.showAlert("info", "", "Deleting message...", "ID: " + id, null);
 
   $.ajax({
-    url: "/api/info/messages/" + id,
+    url: apiUrl + "/info/messages/" + id,
     method: "DELETE",
   })
     .done(function (response) {
diff --git a/scripts/js/network.js b/scripts/js/network.js
index 10397bbd..89cef728 100644
--- a/scripts/js/network.js
+++ b/scripts/js/network.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license.  */
 
-/* global utils:false, apiFailure:false */
+/* global utils:false, apiUrl:false, apiFailure:false */
 
 var tableApi;
 
@@ -64,7 +64,7 @@ function deleteNetworkEntry() {
   utils.disableAll();
   utils.showAlert("info", "", "Deleting network table entry...");
   $.ajax({
-    url: "/api/network/devices/" + id,
+    url: apiUrl + "/network/devices/" + id,
     method: "DELETE",
     success: function () {
       utils.enableAll();
@@ -195,7 +195,7 @@ $(function () {
       "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
       "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     ajax: {
-      url: "/api/network/devices",
+      url: apiUrl + "/network/devices",
       type: "GET",
       dataType: "json",
       data: {
diff --git a/scripts/js/queries.js b/scripts/js/queries.js
index d4dd7b91..27c796ec 100644
--- a/scripts/js/queries.js
+++ b/scripts/js/queries.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license.  */
 
-/* global moment:false, utils:false, REFRESH_INTERVAL:false */
+/* global moment:false, utils:false, apiUrl:false, REFRESH_INTERVAL:false */
 
 const beginningOfTime = 1262304000; // Jan 01 2010, 00:00 in seconds
 const endOfTime = 2147483647; // Jan 19, 2038, 03:14 in seconds
@@ -424,7 +424,7 @@ function addSelectSuggestion(name, dict, data) {
 
 function getSuggestions(dict) {
   $.get(
-    "/api/queries/suggestions",
+    apiUrl + "/queries/suggestions",
     function (data) {
       for (var key in filters) {
         if (Object.hasOwnProperty.call(filters, key)) {
@@ -455,7 +455,7 @@ function filterOn(param, dict) {
 }
 
 function getAPIURL(filters) {
-  var apiurl = "/api/queries?";
+  var apiurl = apiUrl + "/queries?";
   for (var key in filters) {
     if (Object.hasOwnProperty.call(filters, key)) {
       var filter = filters[key];
diff --git a/scripts/js/search.js b/scripts/js/search.js
index f15c7934..8aa588cb 100644
--- a/scripts/js/search.js
+++ b/scripts/js/search.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, apiFailure:false */
+/* global utils:false, apiUrl:false, apiFailure:false */
 var GETDict = {};
 
 $(function () {
@@ -35,7 +35,7 @@ function doSearch() {
 
   $.ajax({
     method: "GET",
-    url: "/api/search/" + encodeURIComponent(q),
+    url: apiUrl + "/search/" + encodeURIComponent(q),
     async: false,
     data: {
       partial: partial,
diff --git a/scripts/js/settings-advanced.js b/scripts/js/settings-advanced.js
index 3d7e4332..c8bc63df 100644
--- a/scripts/js/settings-advanced.js
+++ b/scripts/js/settings-advanced.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, apiFailure: false, applyCheckboxRadioStyle: false, saveSettings:false */
+/* global utils:false, apiUrl:false, apiFailure: false, applyCheckboxRadioStyle: false, saveSettings:false */
 /* exported createDynamicConfigTabs */
 
 function addAllowedValues(allowed) {
@@ -296,7 +296,7 @@ function generateRow(topic, key, value) {
 
 function createDynamicConfigTabs() {
   $.ajax({
-    url: "/api/config?detailed=true",
+    url: apiUrl + "/config?detailed=true",
   })
     .done(function (data) {
       // Create the tabs for the advanced dynamic config topics
diff --git a/scripts/js/settings-api.js b/scripts/js/settings-api.js
index 124d135a..212e7963 100644
--- a/scripts/js/settings-api.js
+++ b/scripts/js/settings-api.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, setConfigValues: false, apiFailure: false, QRious: false */
+/* global utils:false, apiUrl:false, setConfigValues: false, apiFailure: false, QRious: false */
 
 var apiSessionsTable = null;
 var ownSessionID = null;
@@ -31,7 +31,7 @@ function renderBool(data, type) {
 $(function () {
   apiSessionsTable = $("#APISessionsTable").DataTable({
     ajax: {
-      url: "/api/auth/sessions",
+      url: apiUrl + "/auth/sessions",
       type: "GET",
       dataSrc: "sessions",
     },
@@ -247,7 +247,7 @@ function deleteOneSession(id, len, ownSessionDelete) {
   // our own session is then triggered by the last successful deletion of
   // another session (ownSessionDelete == true, len == global deleted)
   $.ajax({
-    url: "/api/auth/session/" + id,
+    url: apiUrl + "/auth/session/" + id,
     method: "DELETE",
   })
     .done(function () {
@@ -272,7 +272,7 @@ function deleteOneSession(id, len, ownSessionDelete) {
 
 function processWebServerConfig() {
   $.ajax({
-    url: "/api/config/webserver?detailed=true",
+    url: apiUrl + "/config/webserver?detailed=true",
   })
     .done(function (data) {
       setConfigValues("webserver", "webserver", data.config.webserver);
@@ -291,7 +291,7 @@ function processWebServerConfig() {
 
 $("#modal-totp").on("shown.bs.modal", function () {
   $.ajax({
-    url: "/api/auth/totp",
+    url: apiUrl + "/auth/totp",
   })
     .done(function (data) {
       TOTPdata = data.totp;
@@ -329,7 +329,7 @@ $("#modal-totp").on("shown.bs.modal", function () {
 var apppwhash = null;
 $("#modal-apppw").on("shown.bs.modal", function () {
   $.ajax({
-    url: "/api/auth/app",
+    url: apiUrl + "/auth/app",
   })
     .done(function (data) {
       apppwhash = data.app.hash;
@@ -373,7 +373,7 @@ $("#apppw_clear").on("click", function () {
 
 function setAppPassword() {
   $.ajax({
-    url: "/api/config",
+    url: apiUrl + "/config",
     type: "PATCH",
     dataType: "json",
     processData: false,
@@ -426,7 +426,7 @@ $("#totp_code").on("keyup", function () {
 
 function setTOTPSecret(secret) {
   $.ajax({
-    url: "/api/config",
+    url: apiUrl + "/config",
     type: "PATCH",
     dataType: "json",
     processData: false,
@@ -478,7 +478,7 @@ $(document).ready(function () {
   processWebServerConfig();
   // Check if TOTP is enabled
   $.ajax({
-    url: "/api/auth",
+    url: apiUrl + "/auth",
   }).done(function (data) {
     if (data.session.totp === false) $("#button-enable-totp").removeClass("hidden");
     else $("#button-disable-totp").removeClass("hidden");
diff --git a/scripts/js/settings-dhcp.js b/scripts/js/settings-dhcp.js
index 6e467668..a64ffd8a 100644
--- a/scripts/js/settings-dhcp.js
+++ b/scripts/js/settings-dhcp.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, setConfigValues: false, apiFailure: false */
+/* global utils:false, apiUrl:false, setConfigValues: false, apiFailure: false */
 
 var dhcpLeaesTable = null,
   toasts = {};
@@ -32,7 +32,7 @@ function renderHostnameCLID(data, type) {
 $(function () {
   dhcpLeaesTable = $("#DHCPLeasesTable").DataTable({
     ajax: {
-      url: "/api/dhcp/leases",
+      url: apiUrl + "/dhcp/leases",
       type: "GET",
       dataSrc: "leases",
     },
@@ -167,7 +167,7 @@ function delLease(ip) {
   toasts[ip] = utils.showAlert("info", "", "Deleting lease...", ip, null);
 
   $.ajax({
-    url: "/api/dhcp/leases/" + encodeURIComponent(ip),
+    url: apiUrl + "/dhcp/leases/" + encodeURIComponent(ip),
     method: "DELETE",
   })
     .done(function (response) {
@@ -214,7 +214,7 @@ function fillDHCPhosts(data) {
 
 function processDHCPConfig() {
   $.ajax({
-    url: "/api/config/dhcp?detailed=true",
+    url: apiUrl + "/config/dhcp?detailed=true",
   })
     .done(function (data) {
       fillDHCPhosts(data.config.dhcp.hosts);
diff --git a/scripts/js/settings-dns-records.js b/scripts/js/settings-dns-records.js
index 93c7d475..99a6dbb3 100644
--- a/scripts/js/settings-dns-records.js
+++ b/scripts/js/settings-dns-records.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Precord see LICENSE file for your rights under this license. */
 
-/* global utils: false, apiFailure:false, setConfigValues: false */
+/* global utils: false, apiUrl: false, apiFailure:false, setConfigValues: false */
 
 function hostsDomain(data) {
   // Split record in format IP NAME1 [NAME2 [NAME3 [NAME...]]]
@@ -156,7 +156,7 @@ function deleteRecord() {
 function delHosts(elem) {
   utils.disableAll();
   utils.showAlert("info", "", "Deleting DNS record...", elem);
-  const url = "/api/config/dns/hosts/" + encodeURIComponent(elem);
+  const url = apiUrl + "/config/dns/hosts/" + encodeURIComponent(elem);
 
   $.ajax({
     url: url,
@@ -183,7 +183,7 @@ function delHosts(elem) {
 function delCNAME(elem) {
   utils.disableAll();
   utils.showAlert("info", "", "Deleting local CNAME record...", elem);
-  const url = "/api/config/dns/cnameRecords/" + encodeURIComponent(elem);
+  const url = apiUrl + "/config/dns/cnameRecords/" + encodeURIComponent(elem);
 
   $.ajax({
     url: url,
@@ -216,7 +216,7 @@ $(document).ready(function () {
   $("#btnAdd-host").on("click", function () {
     utils.disableAll();
     const elem = $("#Hip").val() + " " + $("#Hdomain").val();
-    const url = "/api/config/dns/hosts/" + encodeURIComponent(elem);
+    const url = apiUrl + "/config/dns/hosts/" + encodeURIComponent(elem);
     utils.showAlert("info", "", "Adding DNS record...", elem);
     $.ajax({
       url: url,
@@ -242,7 +242,7 @@ $(document).ready(function () {
     var elem = $("#Cdomain").val() + "," + $("#Ctarget").val();
     var ttlVal = parseInt($("#Cttl").val(), 10);
     if (isFinite(ttlVal) && ttlVal >= 0) elem += "," + ttlVal;
-    const url = "/api/config/dns/cnameRecords/" + encodeURIComponent(elem);
+    const url = apiUrl + "/config/dns/cnameRecords/" + encodeURIComponent(elem);
     utils.showAlert("info", "", "Adding DNS record...", elem);
     $.ajax({
       url: url,
diff --git a/scripts/js/settings-dns.js b/scripts/js/settings-dns.js
index 7059fc5e..1719d01d 100644
--- a/scripts/js/settings-dns.js
+++ b/scripts/js/settings-dns.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global applyCheckboxRadioStyle:false, setConfigValues: false, apiFailure: false */
+/* global applyCheckboxRadioStyle:false, setConfigValues: false, apiFailure: false, apiUrl: false */
 
 // Remove an element from an array (inline)
 function removeFromArray(arr, what) {
@@ -109,7 +109,7 @@ function updateDNSserversTextfield(upstreams, customServers) {
 
 function processDNSConfig() {
   $.ajax({
-    url: "/api/config/dns?detailed=true", // We need the detailed output to get the DNS server list
+    url: apiUrl + "/config/dns?detailed=true", // We need the detailed output to get the DNS server list
   })
     .done(function (data) {
       // Initialize the DNS upstreams
diff --git a/scripts/js/settings-privacy.js b/scripts/js/settings-privacy.js
index 5c57e979..897d2399 100644
--- a/scripts/js/settings-privacy.js
+++ b/scripts/js/settings-privacy.js
@@ -5,11 +5,11 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global setConfigValues: false, apiFailure: false */
+/* global setConfigValues: false, apiFailure: false, apiUrl: false */
 
 function getConfig() {
   $.ajax({
-    url: "/api/config/?detailed=true",
+    url: apiUrl + "/config/?detailed=true",
   })
     .done(function (data) {
       setConfigValues("", "", data.config);
diff --git a/scripts/js/settings-system.js b/scripts/js/settings-system.js
index 79fafb09..653d12d1 100644
--- a/scripts/js/settings-system.js
+++ b/scripts/js/settings-system.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global apiFailure:false, Chart:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false, REFRESH_INTERVAL: false, utils: false */
+/* global apiFailure:false, apiUrl: false, Chart:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false, REFRESH_INTERVAL: false, utils: false */
 
 var hostinfoTimer = null;
 var cachePieChart = null;
@@ -83,7 +83,7 @@ function updateCachePie(data) {
 
 function updateHostInfo() {
   $.ajax({
-    url: "/api/info/host",
+    url: apiUrl + "/info/host",
   })
     .done(function (data) {
       var host = data.host;
@@ -155,7 +155,7 @@ var metricsTimer = null;
 
 function updateMetrics() {
   $.ajax({
-    url: "/api/info/metrics",
+    url: apiUrl + "/info/metrics",
   })
     .done(function (data) {
       var metrics = data.metrics;
@@ -196,7 +196,7 @@ function showQueryLoggingButton(state) {
 
 function getLoggingButton() {
   $.ajax({
-    url: "/api/config/dns/queryLogging",
+    url: apiUrl + "/config/dns/queryLogging",
   })
     .done(function (data) {
       showQueryLoggingButton(data.config.dns.queryLogging);
@@ -214,7 +214,7 @@ $(".confirm-restartdns").confirm({
   title: "Confirmation required",
   confirm: function () {
     $.ajax({
-      url: "/api/action/restartdns",
+      url: apiUrl + "/action/restartdns",
       type: "POST",
     }).fail(function (data) {
       apiFailure(data);
@@ -238,7 +238,7 @@ $(".confirm-flushlogs").confirm({
   title: "Confirmation required",
   confirm: function () {
     $.ajax({
-      url: "/api/action/flush/logs",
+      url: apiUrl + "/action/flush/logs",
       type: "POST",
     }).fail(function (data) {
       apiFailure(data);
@@ -262,7 +262,7 @@ $(".confirm-flusharp").confirm({
   title: "Confirmation required",
   confirm: function () {
     $.ajax({
-      url: "/api/action/flush/arp",
+      url: apiUrl + "/action/flush/arp",
       type: "POST",
     }).fail(function (data) {
       apiFailure(data);
@@ -292,7 +292,7 @@ $("#loggingButton").confirm({
     data.config.dns = {};
     data.config.dns.queryLogging = $("#loggingButton").data("state") !== "enabled";
     $.ajax({
-      url: "/api/config/dns/queryLogging",
+      url: apiUrl + "/config/dns/queryLogging",
       type: "PATCH",
       dataType: "json",
       processData: false,
@@ -364,7 +364,7 @@ $(function () {
   });
 
   $.ajax({
-    url: "/api/network/gateway",
+    url: apiUrl + "/network/gateway",
   })
     .done(function (data) {
       const gateway = data.gateway;
diff --git a/scripts/js/settings-teleporter.js b/scripts/js/settings-teleporter.js
index b337fa90..fb2c3113 100644
--- a/scripts/js/settings-teleporter.js
+++ b/scripts/js/settings-teleporter.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false */
+/* global utils:false, apiUrl: false */
 
 // Add event listener to import button
 document.getElementById("submit-import").addEventListener("click", function () {
@@ -45,7 +45,7 @@ function importZIP() {
   formData.append("import", JSON.stringify(imports));
   formData.append("file", file);
   // eslint-disable-next-line compat/compat
-  fetch("/api/teleporter", {
+  fetch(apiUrl + "/teleporter", {
     method: "POST",
     body: formData,
     headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
@@ -85,7 +85,7 @@ function importZIP() {
 // Inspired by https://stackoverflow.com/a/59576416/2087442
 $("#GETTeleporter").on("click", function () {
   $.ajax({
-    url: "/api/teleporter",
+    url: apiUrl + "/teleporter",
     headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
     method: "GET",
     xhrFields: {
diff --git a/scripts/js/settings.js b/scripts/js/settings.js
index 444af212..43b55ca6 100644
--- a/scripts/js/settings.js
+++ b/scripts/js/settings.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false, apiFailure:false*/
+/* global utils:false, apiUrl:false, apiFailure:false*/
 
 $(function () {
   // Handle hiding of alerts
@@ -164,7 +164,7 @@ function saveSettings() {
 
   // Apply changes
   $.ajax({
-    url: "/api/config",
+    url: apiUrl + "/config",
     method: "PATCH",
     dataType: "json",
     processData: false,
diff --git a/scripts/js/taillog.js b/scripts/js/taillog.js
index 01c1e48e..9a9d3700 100644
--- a/scripts/js/taillog.js
+++ b/scripts/js/taillog.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global moment: false, apiFailure: false, utils: false, REFRESH_INTERVAL: false */
+/* global moment: false, apiFailure: false, utils: false, REFRESH_INTERVAL: false, apiUrl: false */
 
 var nextID = 0;
 var lastPID = -1;
@@ -84,7 +84,7 @@ function getData() {
   }
 
   $.ajax({
-    url: "/api/logs/" + GETDict.file + "?nextID=" + nextID,
+    url: apiUrl + "/logs/" + GETDict.file + "?nextID=" + nextID,
     timeout: 5000,
     method: "GET",
   })
diff --git a/scripts/js/utils.js b/scripts/js/utils.js
index d83cdf2c..4209f34a 100644
--- a/scripts/js/utils.js
+++ b/scripts/js/utils.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global moment:false, apiFailure: false, updateFtlInfo: false, NProgress:false */
+/* global moment:false, apiUrl: false, apiFailure: false, updateFtlInfo: false, NProgress:false */
 
 $(function () {
   // CSRF protection for AJAX requests, this has to be configured globally
@@ -331,7 +331,7 @@ function addFromQueryLog(domain, list) {
   // add Domain to List after Modal has faded in
   alertModal.one("shown.bs.modal", function () {
     $.ajax({
-      url: "/api/domains/" + list + "/exact",
+      url: apiUrl + "/domains/" + list + "/exact",
       method: "post",
       dataType: "json",
       processData: false,
@@ -411,7 +411,7 @@ function checkMessages() {
     ? localStorage.getItem("hideNonfatalDnsmasqWarnings_chkbox") === "true"
     : false;
   $.ajax({
-    url: "/api/info/messages/count" + (ignoreNonfatal ? "?filter_dnsmasq_warnings=true" : ""),
+    url: apiUrl + "/info/messages/count" + (ignoreNonfatal ? "?filter_dnsmasq_warnings=true" : ""),
     method: "GET",
     dataType: "json",
   })
@@ -465,7 +465,7 @@ function changeBulkDeleteStates(table) {
 
 function doLogout() {
   $.ajax({
-    url: "/api/auth",
+    url: apiUrl + "/auth",
     method: "DELETE",
   }).always(function () {
     location.reload();
@@ -646,7 +646,7 @@ function listAlert(type, items, data) {
 function loadingOverlayTimeoutCallback(reloadAfterTimeout) {
   // Try to ping FTL to see if it finished restarting
   $.ajax({
-    url: "/api/info/login",
+    url: apiUrl + "/info/login",
     method: "GET",
     cache: false,
     dataType: "json",
diff --git a/scripts/lua/footer.lp b/scripts/lua/footer.lp
index 6dcb5640..d465cf26 100644
--- a/scripts/lua/footer.lp
+++ b/scripts/lua/footer.lp
@@ -66,6 +66,7 @@ end
 
 </div>
 <!-- ./wrapper -->
+<div id="api-url" style="display: none;"><?=pihole.api_url()?></div>
 <script src="<?=pihole.fileversion('scripts/js/footer.js')?>"></script>
 
 <div id="advanced-info-data" style="display: none;" data-starttime="<?=starttime?>" data-endtime="<?=mg.time(true)?>" data-client-ip="<?=mg.request_info.remote_addr?>" data-tls="<?=tostring(is_secure)?>" data-xff="<?=x_forwarded_for?>"></div>