開發模式執行 npm run dev 時，Vite 預設只會啟動「前端開發伺服器」

當你在開發模式執行 npm run dev 時，Vite 預設只會啟動「前端開發伺服器」，它並不認識你在 server.js 寫的 API 路由。

要讓前端順利呼叫到 /api/config-test，你有兩個主要的處理方式：

1. 同時啟動兩個服務 (最保險)

在開發階段，你需要同時開啟兩個終端機視窗：

• 視窗 A：執行 node server.js（啟動後端 API，預設在 8080 埠）。
• 視窗 B：執行 npm run dev（啟動前端介面，預設在 5173 埠）。

此時，如果你直接在瀏覽器輸入 http://localhost:8080/api/config-test，你應該就能看到 JSON 資料。

---

2. 設定 Vite 代理 (Proxy)

為了讓前端程式碼（5173）呼叫 /api/... 時能自動轉發給後端（8080），你需要修改 vite.config.ts (或 .js)：

TypeScript

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      // 當前端呼叫 /api 時，轉發到 8080
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

設定好 Proxy 後，你在前端程式碼中就可以這樣呼叫：

JavaScript

fetch('/api/config-test')
  .then(res => res.json())
  .then(data => console.log(data));

---

3. 在前端畫面中顯示資料 (驗證方式)

如果你想直接在 AI Studio 產生的畫面上看到結果，可以在你的 .tsx 元件中加入這段測試代碼：

TypeScript

import { useEffect, useState } from 'react';

function TestComponent() {
  const [dbInfo, setDbInfo] = useState('載入中...');

  useEffect(() => {
    fetch('/api/config-test')
      .then(res => res.json())
      .then(data => setDbInfo(data.dbName))
      .catch(err => setDbInfo('呼叫失敗'));
  }, []);

  return <div>資料庫名稱：{dbInfo}</div>;
}

總結驗證流程

1. 確保 Docker 容器已關閉（避免佔用 8080 埠）。
2. 啟動後端：node server.js。
3. 啟動前端：npm run dev。
4. 打開瀏覽器 http://localhost:5173/api/config-test。如果看到 JSON，代表 Proxy 設定成功。