fix: Reverse Proxy support (#3173)

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/>

src_assets/common/assets/web/apps.html

@@ -377,14 +377,14 @@
       };
     },
     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 @@
           "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 @@
       },
       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 @@
       },
       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) => {

src_assets/common/assets/web/config.html

@@ -275,7 +275,7 @@
        }
     },
     created() {
-      fetch("/api/config")
+      fetch("./api/config")
         .then((r) => r.json())
         .then((r) => {
           this.config = r;
@@ -360,7 +360,7 @@
           });
         });
 
-        return fetch("/api/config", {
+        return fetch("./api/config", {
           method: "POST",
           body: JSON.stringify(config),
         }).then((r) => {
@@ -383,7 +383,7 @@
             setTimeout(() => {
               this.saved = this.restarted = false;
             }, 5000);
-            fetch("/api/restart", {
+            fetch("./api/restart", {
               method: "POST"
             });
           }

src_assets/common/assets/web/index.html

@@ -19,7 +19,7 @@
       <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 @@
     },
     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 @@
         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);
       }

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) {

src_assets/common/assets/web/password.html

@@ -90,7 +90,7 @@
     methods: {
       save() {
         this.error = null;
-        fetch("/api/password", {
+        fetch("./api/password", {
           method: "POST",
           body: JSON.stringify(this.passwordData),
         }).then((r) => {

src_assets/common/assets/web/pin.html

@@ -39,7 +39,7 @@
         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") {

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" />

src_assets/common/assets/web/troubleshooting.html

@@ -170,7 +170,7 @@
       },
       methods: {
         refreshLogs() {
-          fetch("/api/logs",)
+          fetch("./api/logs",)
             .then((r) => r.text())
             .then((r) => {
               this.logs = r;
@@ -178,7 +178,7 @@
         },
         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 @@
         },
         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 @@
             });
         },
         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 @@
           setTimeout(() => {
             this.restartPressed = false;
           }, 5000);
-          fetch("/api/restart", {
+          fetch("./api/restart", {
             method: "POST",
           });
         },

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 @@
       save() {
         this.error = null;
         this.loading = true;
-        fetch("/api/password", {
+        fetch("./api/password", {
           method: "POST",
           body: JSON.stringify(this.passwordData),
         }).then((r) => {

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: {