web-antrean/Proxy_Documentation.md

Dokumentasi Implementasi Proxy API (Nuxt 3)

Dokumen ini menjelaskan cara menggunakan dan menambah proxy API di file nuxt.config.ts untuk menangani masalah CORS dan menyederhanakan pemanggilan endpoint backend.

1. Menambah Proxy Baru di nuxt.config.ts

Jika Anda memiliki API backend lain (misalnya departemen berbeda atau IP berbeda), Anda cukup menambah baris baru di dalam objek routeRules.

Contoh Konfigurasi:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Proxy untuk Statistik (yang sudah ada)
    "/stats-api/**": {
      proxy: "http://10.10.150.100:8084/api/v1/**",
    },

    // Proxy untuk API Pasien (Contoh Tambahan)
    "/patient-api/**": {
      proxy: "http://10.10.150.101:8000/api/v2/**",
    },

    // Proxy untuk API Antrean (IP sama, prefix path berbeda)
    "/queue-api/**": {
      proxy: "http://10.10.150.100:8084/api/v1/queue/**",
    },
  },
});

---

2. Cara Menggunakan di Composable

Setelah didaftarkan di nuxt.config.ts, Anda tidak perlu lagi menulis IP Address di dalam kode Vue/TypeScript Anda. Gunakan path prefix yang sudah didefinisikan.

Contoh File: composables/usePatientAPI.ts

export const usePatientAPI = () => {
  const fetchPatient = async (id: string) => {
    // Alamat asli: http://10.10.150.101:8000/api/v2/patient/123
    // Cukup panggil seperti ini:
    return await $fetch(`/patient-api/patient/${id}`);
  };

  return { fetchPatient };
};

---

3. Keuntungan Menggunakan Proxy

1. Menghindari CORS: Browser tidak akan memblokir request karena seolah-olah request dikirim ke server yang sama dengan frontend.
2. Keamanan: IP backend asli tidak terekspos secara langsung di kode frontend (Client-side).
3. Kemudahan Maintenance: Jika IP Server backend berubah, Anda hanya perlu mengubah satu baris di nuxt.config.ts tanpa harus mencari dan mengganti di seluruh file .vue atau .ts.

---

4. Tips Debugging Proxy

• Jika menggunakan Vite Dev Server, pastikan Anda menjalankan ulang npm run dev setelah mengubah nuxt.config.ts.
• Cek tab Network di Developer Tools (F12). Anda akan melihat request ke localhost:3000/stats-api/... dan server Nuxt akan meneruskannya ke IP backend secara otomatis.