fix: Replace hardcoded API URLs with dynamic configuration to support remote access

frontend/src/components/DwarfPlanetOrbits.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import { Line } from '@react-three/drei';
 import * as THREE from 'three';
 import { scalePosition } from '../utils/scaleDistance';
+import { request } from '../utils/request';
 
 interface OrbitData {
   bodyId: string;
@@ -38,14 +39,8 @@ export function DwarfPlanetOrbits() {
 
       try {
         // Step 1: Get list of dwarf planets from backend
-        const listResponse = await fetch('http://localhost:8000/api/celestial/list?body_type=dwarf_planet');
+        const listResponse = await request.get('/celestial/list?body_type=dwarf_planet');
-        if (!listResponse.ok) {
+        const listData = listResponse.data;
-          console.warn('Failed to fetch dwarf planet list');
-          setLoading(false);
-          return;
-        }
-
-        const listData = await listResponse.json();
         const dwarfPlanets = listData.bodies || [];
 
         if (dwarfPlanets.length === 0) {
@@ -64,21 +59,16 @@ export function DwarfPlanetOrbits() {
         // Use body_ids parameter to fetch all dwarf planets
         const bodyIds = dwarfPlanets.map((p: any) => p.id).join(',');
 
-        const response = await fetch(
+        const response = await request.get('/celestial/positions', {
-          `http://localhost:8000/api/celestial/positions?` +
+          params: {
-          `body_ids=${bodyIds}&` +
+            body_ids: bodyIds,
-          `start_time=${startDate.toISOString()}&` +
+            start_time: startDate.toISOString(),
-          `end_time=${endDate.toISOString()}&` +
+            end_time: endDate.toISOString(),
-          `step=30d`
+            step: '30d',
-        );
+          },
+        });
 
-        if (!response.ok) {
+        const data = response.data;
-          console.warn('Failed to fetch dwarf planet orbits');
-          setLoading(false);
-          return;
-        }
-
-        const data = await response.json();
 
         // Step 3: Process each dwarf planet's orbital data
         for (const planet of dwarfPlanets) {

frontend/src/components/OrbitRenderer.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { Line } from '@react-three/drei';
 import * as THREE from 'three';
 import { scalePosition } from '../utils/scaleDistance';
+import { request } from '../utils/request';
 
 interface OrbitData {
   bodyId: string;
@@ -32,13 +33,8 @@ export function OrbitRenderer({ visible = true }: OrbitRendererProps) {
 
       try {
         // Fetch precomputed orbits from backend
-        const response = await fetch('http://localhost:8000/api/celestial/orbits');
+        const response = await request.get('/celestial/orbits');
-
+        const data = response.data;
-        if (!response.ok) {
-          throw new Error(`Failed to fetch orbits: ${response.statusText}`);
-        }
-
-        const data = await response.json();
 
         if (!data.orbits || data.orbits.length === 0) {
           console.warn('⚠️ No orbital data found in database');

frontend/src/components/Stars.tsx

@@ -4,6 +4,7 @@
 import { useEffect, useState, useMemo } from 'react';
 import { Text, Billboard } from '@react-three/drei';
 import * as THREE from 'three';
+import { request } from '../utils/request';
 
 interface Star {
   name: string;
@@ -50,14 +51,9 @@ export function Stars() {
 
   useEffect(() => {
     // Load star data from API
-    fetch('http://localhost:8000/api/celestial/static/star')
+    request.get('/celestial/static/star')
       .then((res) => {
-        if (!res.ok) {
+        const data = res.data;
-          throw new Error(`HTTP error! status: ${res.status}`);
-        }
-        return res.json();
-      })
-      .then((data) => {
         // API returns { category, items: [{ id, name, name_zh, data: {...} }] }
         const starData = data.items.map((item: any) => ({
           name: item.name,

frontend/src/utils/request.ts

@@ -4,7 +4,18 @@
 import axios from 'axios';
 import { auth } from './auth';
 
-const API_BASE_URL = 'http://localhost:8000/api';
+// Dynamically determine API base URL
+const getBaseUrl = () => {
+  if (import.meta.env.VITE_API_BASE_URL) {
+    return import.meta.env.VITE_API_BASE_URL;
+  }
+  if (import.meta.env.DEV) {
+    return `http://${window.location.hostname}:8000/api`;
+  }
+  return '/api';
+};
+
+export const API_BASE_URL = getBaseUrl();
 
 // Create axios instance
 export const request = axios.create({