API Proxy Architecture (Same-Origin)

Frontend menggunakan same-origin proxy untuk menghindari masalah CORS.

Last verified: 2026-03-16

---

Arsitektur

┌─────────────────────────────────────────────────────────────┐
│                    dev.gcgscola.id                           │
├─────────────────────────────────────────────────────────────┤
│  /              → serve /var/www/dev-scola/dist (frontend)  │
│  /api/*         → proxy to localhost:8074 (Odoo)            │
│  /web/*         → proxy to localhost:8074 (Odoo)            │
└─────────────────────────────────────────────────────────────┘

Mengapa Same-Origin?

Problem Cross-Origin: - Frontend di dev.gcgscola.id → backend di be-dev.gcgscola.id = butuh CORS - withCredentials: true (session cookies) + cors='*' = TIDAK KOMPATIBEL - Browser menolak response jika Access-Control-Allow-Origin: * dengan credentials

Solusi: - Semua API calls melalui dev.gcgscola.id/api/ - Nginx proxy ke Odoo backend - Tidak ada cross-origin request → tidak perlu CORS

Konfigurasi

.env.production — JANGAN DIUBAH!

# VITE_API_URL="https://be-dev.gcgscola.id"   # HARUS DICOMMENT!

VITE_API_URL harus kosong agar frontend pakai relative URL /api.

src/api/apiServices.js

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL
    ? `${import.meta.env.VITE_API_URL}/api`
    : "/api",  // Jika VITE_API_URL kosong → same-origin
  withCredentials: true,
});

Nginx Config

server {
    server_name dev.gcgscola.id;
    root /var/www/dev-scola/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api/ {
        proxy_pass http://127.0.0.1:8074;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    location /web {
        proxy_pass http://127.0.0.1:8074;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

GitHub Actions — JANGAN set VITE_API_URL

- name: Build project
  run: npm run build
  env:
    NODE_OPTIONS: "--max-old-space-size=4096"
    # VITE_API_URL intentionally not set

Troubleshooting

Error	Penyebab	Solusi
CORS policy blocked	Frontend memanggil cross-origin	Pastikan VITE_API_URL kosong, rebuild
502 Bad Gateway	Odoo tidak running	ps aux \| grep odoo-bin, start Odoo
Double slash //api	VITE_API_URL punya trailing slash	Hapus trailing slash atau comment out

Deployment Checklist

• [ ] .env.production: VITE_API_URL dicomment
• [ ] GitHub workflow: tidak set VITE_API_URL
• [ ] Build: verify baseURL:"/api" di output
• [ ] Nginx: proxy /api/ dan /web aktif
• [ ] Odoo running di port 8074