From a3ba700522d5ee2bbc1b3eefe2c0d35c6faa57ac Mon Sep 17 00:00:00 2001
From: Degot <1160122+Degot@users.noreply.github.com>
Date: Sat, 19 Oct 2024 05:49:34 +0300
Subject: [PATCH] fix: Reverse Proxy support (#3173)

---
 src_assets/common/assets/web/Navbar.vue           | 14 +++++++-------
 src_assets/common/assets/web/apps.html            | 10 +++++-----
 src_assets/common/assets/web/config.html          |  6 +++---
 src_assets/common/assets/web/index.html           |  6 +++---
 src_assets/common/assets/web/locale.js            |  4 ++--
 src_assets/common/assets/web/password.html        |  2 +-
 src_assets/common/assets/web/pin.html             |  2 +-
 src_assets/common/assets/web/template_header.html |  4 ++--
 src_assets/common/assets/web/troubleshooting.html | 12 ++++++------
 src_assets/common/assets/web/welcome.html         |  4 ++--
 vite.config.js                                    |  1 +
 11 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src_assets/common/assets/web/Navbar.vue b/src_assets/common/assets/web/Navbar.vue
index 2358750b255..166398b9fa7 100644
--- a/src_assets/common/assets/web/Navbar.vue
+++ b/src_assets/common/assets/web/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <nav class="navbar navbar-light navbar-expand-lg navbar-background header">
     <div class="container-fluid">
-      <a class="navbar-brand" href="/" title="Sunshine">
+      <a class="navbar-brand" href="./" title="Sunshine">
         <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
       </a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
@@ -11,22 +11,22 @@
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
-            <a class="nav-link" href="/"><i class="fas fa-fw fa-home"></i> {{ $t('navbar.home') }}</a>
+            <a class="nav-link" href="./"><i class="fas fa-fw fa-home"></i> {{ $t('navbar.home') }}</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/pin"><i class="fas fa-fw fa-unlock"></i> {{ $t('navbar.pin') }}</a>
+            <a class="nav-link" href="./pin"><i class="fas fa-fw fa-unlock"></i> {{ $t('navbar.pin') }}</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/apps"><i class="fas fa-fw fa-stream"></i> {{ $t('navbar.applications') }}</a>
+            <a class="nav-link" href="./apps"><i class="fas fa-fw fa-stream"></i> {{ $t('navbar.applications') }}</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/config"><i class="fas fa-fw fa-cog"></i> {{ $t('navbar.configuration') }}</a>
+            <a class="nav-link" href="./config"><i class="fas fa-fw fa-cog"></i> {{ $t('navbar.configuration') }}</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/password"><i class="fas fa-fw fa-user-shield"></i> {{ $t('navbar.password') }}</a>
+            <a class="nav-link" href="./password"><i class="fas fa-fw fa-user-shield"></i> {{ $t('navbar.password') }}</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/troubleshooting"><i class="fas fa-fw fa-info"></i> {{ $t('navbar.troubleshoot') }}</a>
+            <a class="nav-link" href="./troubleshooting"><i class="fas fa-fw fa-info"></i> {{ $t('navbar.troubleshoot') }}</a>
           </li>
           <li class="nav-item">
             <ThemeToggle/>
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index 7e156e77cb8..f9191eae088 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -377,14 +377,14 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
       };
     },
     created() {
-      fetch("/api/apps")
+      fetch("./api/apps")
         .then((r) => r.json())
         .then((r) => {
           console.log(r);
           this.apps = r.apps;
         });
 
-      fetch("/api/config")
+      fetch("./api/config")
         .then(r => r.json())
         .then(r => this.platform = r.platform);
     },
@@ -435,7 +435,7 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
           "Are you sure to delete " + this.apps[id].name + "?"
         );
         if (resp) {
-          fetch("/api/apps/" + id, { method: "DELETE" }).then((r) => {
+          fetch("./api/apps/" + id, { method: "DELETE" }).then((r) => {
             if (r.status == 200) document.location.reload();
           });
         }
@@ -533,7 +533,7 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
       },
       useCover(cover) {
         this.coverFinderBusy = true;
-        fetch("/api/covers/upload", {
+        fetch("./api/covers/upload", {
           method: "POST",
           body: JSON.stringify({
             key: cover.key,
@@ -548,7 +548,7 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
       },
       save() {
         this.editForm["image-path"] = this.editForm["image-path"].toString().replace(/"/g, '');
-        fetch("/api/apps", {
+        fetch("./api/apps", {
           method: "POST",
           body: JSON.stringify(this.editForm),
         }).then((r) => {
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index 8386dbd3673..3c9cb3aa651 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -275,7 +275,7 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
        }
     },
     created() {
-      fetch("/api/config")
+      fetch("./api/config")
         .then((r) => r.json())
         .then((r) => {
           this.config = r;
@@ -360,7 +360,7 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
           });
         });
 
-        return fetch("/api/config", {
+        return fetch("./api/config", {
           method: "POST",
           body: JSON.stringify(config),
         }).then((r) => {
@@ -383,7 +383,7 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
             setTimeout(() => {
               this.saved = this.restarted = false;
             }, 5000);
-            fetch("/api/restart", {
+            fetch("./api/restart", {
               method: "POST"
             });
           }
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index 9eccf9e1eca..5f879094e1b 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -19,7 +19,7 @@ <h1 class="my-4">{{ $t('index.welcome') }}</h1>
       <ul>
         <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
       </ul>
-      <a class="btn btn-danger" href="/troubleshooting/#logs">View Logs</a>
+      <a class="btn btn-danger" href="./troubleshooting/#logs">View Logs</a>
     </div>
     <!-- Version -->
     <div class="card p-2 my-4">
@@ -98,7 +98,7 @@ <h3>{{githubVersion.release.name}}</h3>
     },
     async created() {
       try {
-        let config = await fetch("/api/config").then((r) => r.json());
+        let config = await fetch("./api/config").then((r) => r.json());
         this.notifyPreReleases = config.notify_pre_releases;
         this.version = new SunshineVersion(null, config.version);
         console.log("Version: ", this.version.version)
@@ -110,7 +110,7 @@ <h3>{{githubVersion.release.name}}</h3>
         console.error(e);
       }
       try {
-        this.logs = (await fetch("/api/logs").then(r => r.text()))
+        this.logs = (await fetch("./api/logs").then(r => r.text()))
       } catch (e) {
         console.error(e);
       }
diff --git a/src_assets/common/assets/web/locale.js b/src_assets/common/assets/web/locale.js
index 07775d004e4..25f9795c8f1 100644
--- a/src_assets/common/assets/web/locale.js
+++ b/src_assets/common/assets/web/locale.js
@@ -4,7 +4,7 @@ import {createI18n} from "vue-i18n";
 import en from './public/assets/locale/en.json'
 
 export default async function() {
-    let r = await (await fetch("/api/configLocale")).json();
+    let r = await (await fetch("./api/configLocale")).json();
     let locale = r.locale ?? "en";
     document.querySelector('html').setAttribute('lang', locale);
     let messages = {
@@ -12,7 +12,7 @@ export default async function() {
     };
     try {
         if (locale !== 'en') {
-            let r = await (await fetch(`/assets/locale/${locale}.json`)).json();
+            let r = await (await fetch(`./assets/locale/${locale}.json`)).json();
             messages[locale] = r;
         }
     } catch (e) {
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/password.html
index 639c82b7401..7c0163fdf3a 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/password.html
@@ -90,7 +90,7 @@ <h4>{{ $t('password.new_creds') }}</h4>
     methods: {
       save() {
         this.error = null;
-        fetch("/api/password", {
+        fetch("./api/password", {
           method: "POST",
           body: JSON.stringify(this.passwordData),
         }).then((r) => {
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
index d8ce1da5496..8b9c794bc6e 100644
--- a/src_assets/common/assets/web/pin.html
+++ b/src_assets/common/assets/web/pin.html
@@ -39,7 +39,7 @@ <h1 class="my-4 text-center">{{ $t('pin.pin_pairing') }}</h1>
         let name = document.querySelector("#name-input").value;
         document.querySelector("#status").innerHTML = "";
         let b = JSON.stringify({pin: pin, name: name});
-        fetch("/api/pin", {method: "POST", body: b})
+        fetch("./api/pin", {method: "POST", body: b})
           .then((response) => response.json())
           .then((response) => {
             if (response.status.toString().toLowerCase() === "true") {
diff --git a/src_assets/common/assets/web/template_header.html b/src_assets/common/assets/web/template_header.html
index e636a8ac9e2..1a27f925404 100644
--- a/src_assets/common/assets/web/template_header.html
+++ b/src_assets/common/assets/web/template_header.html
@@ -3,7 +3,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Sunshine</title>
-<link rel="icon" type="image/x-icon" href="/images/sunshine.ico">
+<link rel="icon" type="image/x-icon" href="./images/sunshine.ico">
 <link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
 <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-<link href="/assets/css/sunshine.css" rel="stylesheet" />
+<link href="./assets/css/sunshine.css" rel="stylesheet" />
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
index 2a41666054a..5e02b8c8113 100644
--- a/src_assets/common/assets/web/troubleshooting.html
+++ b/src_assets/common/assets/web/troubleshooting.html
@@ -170,7 +170,7 @@ <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
       },
       methods: {
         refreshLogs() {
-          fetch("/api/logs",)
+          fetch("./api/logs",)
             .then((r) => r.text())
             .then((r) => {
               this.logs = r;
@@ -178,7 +178,7 @@ <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
         },
         closeApp() {
           this.closeAppPressed = true;
-          fetch("/api/apps/close", { method: "POST" })
+          fetch("./api/apps/close", { method: "POST" })
             .then((r) => r.json())
             .then((r) => {
               this.closeAppPressed = false;
@@ -190,7 +190,7 @@ <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
         },
         unpairAll() {
           this.unpairAllPressed = true;
-          fetch("/api/clients/unpair-all", { method: "POST" })
+          fetch("./api/clients/unpair-all", { method: "POST" })
             .then((r) => r.json())
             .then((r) => {
               this.unpairAllPressed = false;
@@ -202,13 +202,13 @@ <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
             });
         },
         unpairSingle(uuid) {
-          fetch("/api/clients/unpair", { method: "POST", body: JSON.stringify({ uuid }) }).then(() => {
+          fetch("./api/clients/unpair", { method: "POST", body: JSON.stringify({ uuid }) }).then(() => {
             this.showApplyMessage = true;
             this.refreshClients();
           });
         },
         refreshClients() {
-          fetch("/api/clients/list")
+          fetch("./api/clients/list")
             .then((response) => response.json())
             .then((response) => {
               const clientList = document.querySelector("#client-list");
@@ -232,7 +232,7 @@ <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
           setTimeout(() => {
             this.restartPressed = false;
           }, 5000);
-          fetch("/api/restart", {
+          fetch("./api/restart", {
             method: "POST",
           });
         },
diff --git a/src_assets/common/assets/web/welcome.html b/src_assets/common/assets/web/welcome.html
index 18c67b2ee79..4765aeb5db9 100644
--- a/src_assets/common/assets/web/welcome.html
+++ b/src_assets/common/assets/web/welcome.html
@@ -11,7 +11,7 @@
       <div class="card p-2">
         <header>
           <h1 class="mb-0">
-            <img src="/images/logo-sunshine-45.png" height="45" alt="">
+            <img src="./images/logo-sunshine-45.png" height="45" alt="">
             {{ $t('welcome.greeting') }}
           </h1>
         </header>
@@ -76,7 +76,7 @@ <h1 class="mb-0">
       save() {
         this.error = null;
         this.loading = true;
-        fetch("/api/password", {
+        fetch("./api/password", {
           method: "POST",
           body: JSON.stringify(this.passwordData),
         }).then((r) => {
diff --git a/vite.config.js b/vite.config.js
index 8732f1a08c7..4bfd66d2585 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -39,6 +39,7 @@ export default defineConfig({
             vue: 'vue/dist/vue.esm-bundler.js'
         }
     },
+    base: './',
     plugins: [vue(), ViteEjsPlugin({ header })],
     root: resolve(assetsSrcPath),
     build: {