🚀 Membuat Proxy Cloudinary dengan Cloudflare Workers + CORS Support

📌 Pendahuluan

Kalau kamu sering bekerja dengan Cloudinary untuk menyimpan dan mengelola gambar atau file statis, mungkin pernah mengalami masalah CORS (Cross-Origin Resource Sharing) saat mengakses file tersebut dari domain yang berbeda.

Salah satu solusi elegan untuk mengatasinya adalah dengan membuat proxy server menggunakan Cloudflare Workers.
Dengan cara ini:

·         File tetap diambil dari Cloudinary.

·         CORS sudah diatur langsung di Worker.

·         Bisa tambahkan optimasi seperti cache untuk mempercepat loading.

Artikel ini akan membahas cara membuat proxy Cloudinary dengan Cloudflare Workers menggunakan kode sederhana.

---

🎯 Tujuan Tutorial

Setelah membaca tutorial ini, kamu akan bisa:

1.      Membuat Worker yang meneruskan request ke Cloudinary.

2.      Mengatur CORS agar file bisa diakses dari domain mana saja.

3.      Mengaktifkan cache jangka panjang agar lebih hemat bandwidth.

---

🛠️ Persiapan

Sebelum mulai, pastikan kamu punya:

• Akun Cloudflare (gratis juga cukup).
• Akun Cloudinary dan tahu base URL milikmu, misalnya:

https://res.cloudinary.com/namapengguna

• Browser untuk mengetes hasilnya.

---

📜 Kode Lengkap

Berikut kode lengkap yang akan kita gunakan:

export default {
  async fetch(request) {
    const url = new URL(request.url);
    const path = url.pathname;
    const cloudinaryBase = "https://res.cloudinary.com/dtqlbsocv";
    const targetUrl = `${cloudinaryBase}${path}`;

    if (request.method === "OPTIONS") {
      return new Response(null, {
        status: 204,
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type, User-Agent"
        }
      });
    }

    const res = await fetch(targetUrl);
    return new Response(res.body, {
      status: res.status,
      headers: {
        "Content-Type": res.headers.get("Content-Type"),
        "Access-Control-Allow-Origin": "*",
        "Cache-Control": "public, max-age=31536000"
      }
    });
  }
}

---

🔍 Penjelasan Kode

1️⃣ Menangkap URL Request

const url = new URL(request.url);
const path = url.pathname;

Bagian ini mengambil path dari URL yang diminta.
Misalnya request:

https://worker.example.com/images/logo.png

Maka path berisi:

/images/logo.png

---

2️⃣ Menentukan Base URL Cloudinary

const cloudinaryBase = "https://res.cloudinary.com/dtqlbsocv";
const targetUrl = `${cloudinaryBase}${path}`;

Kita menyimpan URL dasar Cloudinary, lalu menggabungkannya dengan path dari request.

Contoh:

·         Request ke: /images/logo.png

·         Target URL jadi:

https://res.cloudinary.com/dtqlbsocv/images/logo.png

---

3️⃣ Menangani Preflight CORS (OPTIONS)

if (request.method === "OPTIONS") {
  return new Response(null, {
    status: 204,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, User-Agent"
    }
  });
}

Sebelum mengirim GET, browser kadang mengirim request OPTIONS untuk memastikan server memperbolehkan cross-origin.
Di sini kita langsung membalas status 204 (No Content) dengan header CORS yang lengkap.

---

4️⃣ Mengambil File dari Cloudinary

const res = await fetch(targetUrl);

Di sinilah Worker mengambil file asli dari Cloudinary.

---

5️⃣ Mengirim Kembali ke Client

return new Response(res.body, {
  status: res.status,
  headers: {
    "Content-Type": res.headers.get("Content-Type"),
    "Access-Control-Allow-Origin": "*",
    "Cache-Control": "public, max-age=31536000"
  }
});

·  Content-Type → Menjaga tipe file sesuai aslinya.
·  Access-Control-Allow-Origin:→ Mengizinkan semua domain mengakses file.
·  Cache-Control → Mengaktifkan cache 1 tahun untuk performa maksimal.

---

🖥️ Cara Men-deploy di Cloudflare Workers

1.      Login ke Cloudflare
Masuk ke dashboard Cloudflare.

2.      Buat Worker Baru

o    Pilih menu Workers & Pages.

o    Klik Create Application → Create Worker.

3.      Tempel Kode
Salin kode di atas dan tempel di editor Cloudflare Workers.

4.      Simpan dan Deploy
Klik Save and Deploy.

5.      Tes di Browser
Akses URL seperti:

        https://nama-worker.example.workers.dev/path/file.jpg

File akan diambil dari Cloudinary, tapi lewat proxy Worker.

---

🎯 Keuntungan Pendekatan Ini

✅ CORS sudah beres tanpa perlu utak-atik di Cloudinary.

✅ Bisa custom header sesuai kebutuhan.

✅ Cache panjang menghemat bandwidth dan mempercepat loading.

✅ Gratis kalau trafiknya masih kecil (Cloudflare Workers plan gratis punya kuota harian).

---

⚡ Tips Lanjutan

·         Kamu bisa menambahkan resize otomatis dengan memanfaatkan parameter Cloudinary langsung di path.

·         Bisa juga menambahkan proteksi token supaya hanya pengguna tertentu yang bisa mengakses.

---

Penulis : Isbat Usman