Menyimpan Cache CORS - demi performa dan biaya

xguru · 2022-09-22T10:18:01+09:00

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

(httptoolkit.tech)

35 poin oleh xguru 2022-09-22 | 2 komentar | Bagikan ke WhatsApp

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

2 komentar

nicewook 2022-09-23

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

kofmania 2022-09-22

Performa terbalik sepenuhnya -> performa menjadi setengahnya