Fanrouver
67 lines
2.2 KiB
Markdown
67 lines
2.2 KiB
Markdown
# 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:
|
|
|
|
```typescript
|
|
// 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`
|
|
|
|
```typescript
|
|
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.
|