From f4b0cdc56994c6b933ad80b71339f975a44debbc Mon Sep 17 00:00:00 2001
From: "mula.liu" <mula.liu@163.com>
Date: Wed, 3 Dec 2025 00:34:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E6=96=87=E4=BB=B6=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CelestialBody.tsx      |  7 ++-----
 frontend/src/components/InterstellarTicker.tsx |  7 ++-----
 frontend/src/components/Probe.tsx              |  9 ++++-----
 frontend/vite.config.ts                        | 17 +++++++++++++++++
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/CelestialBody.tsx b/frontend/src/components/CelestialBody.tsx
index 90f1cf5..3f20052 100644
--- a/frontend/src/components/CelestialBody.tsx
+++ b/frontend/src/components/CelestialBody.tsx
@@ -104,12 +104,9 @@ function Planet({ body, size, emissive, emissiveIntensity, allBodies, isSelected
           (r) => !r.file_path.includes('atmosphere') && !r.file_path.includes('night')
         );
         if (mainTexture) {
-          // Construct full URL from file_path
+          // Construct path for Nginx proxy
           // file_path is like "texture/2k_sun.jpg", need to add "upload/" prefix
-          const protocol = window.location.protocol;
-          const hostname = window.location.hostname;
-          const port = import.meta.env.VITE_API_BASE_URL ? '' : ':8000';
-          setTexturePath(`${protocol}//${hostname}${port}/upload/${mainTexture.file_path}`);
+          setTexturePath(`/upload/${mainTexture.file_path}`);
         } else {
           setTexturePath(null);
         }
diff --git a/frontend/src/components/InterstellarTicker.tsx b/frontend/src/components/InterstellarTicker.tsx
index baa9ea5..2d3cac5 100644
--- a/frontend/src/components/InterstellarTicker.tsx
+++ b/frontend/src/components/InterstellarTicker.tsx
@@ -9,11 +9,8 @@ export function InterstellarTicker({ isPlaying }: InterstellarTickerProps) {
 
   useEffect(() => {
     if (!audioRef.current) {
-      // Initialize audio element
-      const protocol = window.location.protocol;
-      const hostname = window.location.hostname;
-      const port = import.meta.env.VITE_API_BASE_URL ? '' : ':8000'; 
-      const audioUrl = `${protocol}//${hostname}${port}/upload/assets/tick_sample.m4a`;
+      // Initialize audio element with Nginx proxied path
+      const audioUrl = `/upload/assets/tick_sample.m4a`;
       
       const audio = new Audio(audioUrl);
       audio.loop = true; // Enable looping
diff --git a/frontend/src/components/Probe.tsx b/frontend/src/components/Probe.tsx
index c2cd55b..b241d38 100644
--- a/frontend/src/components/Probe.tsx
+++ b/frontend/src/components/Probe.tsx
@@ -242,11 +242,10 @@ export function Probe({ body, allBodies, isSelected = false }: ProbeProps) {
           setResourceScale(scale);
           console.log(`[Probe ${body.name}] Scale from resource:`, scale);
 
-          // Construct full URL from file_path
-          const protocol = window.location.protocol;
-          const hostname = window.location.hostname;
-          const port = import.meta.env.VITE_API_BASE_URL ? '' : ':8000';
-          const fullPath = `${protocol}//${hostname}${port}/upload/${modelResource.file_path}`;
+          // Construct path for Nginx proxy
+          // Database stores relative path like "texture/2k_mercury.jpg" or "model/webb.glb"
+          // We need to add /upload/ prefix for Nginx to proxy to backend
+          const fullPath = `/upload/${modelResource.file_path}`;
           console.log(`[Probe ${body.name}] Model path:`, fullPath);
 
           // Preload the model before setting the path
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 59270ce..66e5efc 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -7,5 +7,22 @@ export default defineConfig({
   server: {
     host: '0.0.0.0', // Listen on all network interfaces
     port: 5173,
+    proxy: {
+      // Proxy API requests to backend
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      // Proxy upload files to backend
+      '/upload': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      // Proxy public assets to backend
+      '/public': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
   },
 })