Menyimpan Cache CORS - demi performa dan biaya

Apa itu CORS preflight?

• Sebelum mengirim request yang kompleks, browser lebih dulu mengirim OPTIONS untuk memeriksa apakah ada izin
• Namun pada praktiknya, sebagian besar request memerlukannya (misalnya ada body JSON/XML, menyertakan kredensial, dan sebagainya)
• Alasan ini buruk adalah karena waktu yang dibutuhkan untuk request sebenarnya menjadi lebih lama
  • Request OPTIONS pada dasarnya tidak bisa di-cache secara default, sehingga CDN pun biasanya tidak menanganinya dan request tetap sampai ke server
  • Nilai-nilai ini di-cache di sisi klien dan secara default hanya bertahan 5 detik
    • Artinya jika halaman web melakukan polling API setiap 10 detik, maka preflight juga akan terjadi sekali setiap 10 detik
  • Dalam banyak kasus, ini meningkatkan latensi API pada klien browser sehingga dari sudut pandang pengguna, performa terasa turun setengahnya
  • Selain itu juga memberi beban yang tidak perlu pada server API dan meningkatkan biaya
  • Terutama jika menggunakan serverless. Lambda, Netlify Functions, Cloudflare Workers, dan Google Cloud Functions semuanya mengenakan biaya per pemanggilan fungsi, dan preflight ini juga termasuk di dalamnya

Cara menyimpan cache respons preflight

• Simpan cache di browser agar tidak mengirim request preflight identik yang tidak perlu
• Simpan cache di lapisan CDN agar request ini bisa dijawab tanpa backend server yang sebenarnya perlu memprosesnya

CORS caching for browsers

• Tambahkan header berikut pada respons preflight Access-Control-Max-Age: 86400
• Firefox mendukung hingga 86400 (24 jam), tetapi browser berbasis Chromium memiliki nilai maksimum 7200 (2 jam)

CORS caching for CDNs

• Untuk melakukan caching di CDN atau proxy, tambahkan header berikut
  Cache-Control: public, max-age=86400
Vary: origin
• Yang penting, OPTIONS pada dasarnya tidak diatur untuk di-cache secara default, jadi ini bukan standar. Namun sebagian besar CDN mendukungnya

Contoh konfigurasi

• Caching CORS with AWS Lambda
• Caching CORS in Node.js
• Caching CORS in Python
• Caching CORS with Java Spring

[nicewook]

Kebetulan saya sedang melihat bagian ini, dan menurut saya menarik.

[kofmania]

Performa terbalik sepenuhnya -> performa menjadi setengahnya