CORS cachen – für Performance und geringere Kosten

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

Was ist ein CORS-Preflight? Bevor eine komplexe Anfrage gesendet wird, wird zunächst per OPTIONS angefragt, ob die Berechtigung dafür besteht In der Praxis benötigen das jedoch die meisten Anfragen tatsächlich (z. B. mit JSON-/XML-Body oder mit Credentials usw.) Problematisch ist das, weil sich dadurch die Zeit bis zur eigentlichen Anfrage erhöht OPTIONS-Requests sind standardmäßig nicht cachebar, und auch CDNs verarbeiten sie daher meist nicht im Cache, sodass die Anfrage bis zum Server durchgereicht wird Diese Werte werden auf Client-Seite gecacht und standardmäßig nur 5 Sekunden lang behalten Wenn also eine Webseite alle 10 Sekunden die API pollt, wird auch alle 10 Sekunden einmal ein Preflight ausgeführt In vielen Fällen erhöht das die API-Latenz im Browser-Client, sodass sich die wahrgenommene Performance für Nutzer halbiert Außerdem belastet es den API-Server unnötig und erhöht die Kosten Besonders dann, wenn man Serverless nutzt. Lambda, Netlify Functions, Cloudflare Workers und Google Cloud Functions berechnen alle pro Funktionsaufruf – und dieser Preflight zählt ebenfalls dazu Wie man Preflight-Antworten cached Im Browser cachen, damit keine unnötigen identischen Preflight-Requests gesendet werden Auf CDN-Ebene cachen, damit diese Requests beantwortet werden können, ohne dass der eigentliche Backend-Server sie verarbeiten muss CORS-Caching für Browser Dem Preflight-Response folgenden Header hinzufügen: Access-Control-Max-Age: 86400 Firefox erlaubt bis zu 86400 (24 Stunden), Chromium-basierte Browser haben jedoch 7200 (2 Stunden) als Maximalwert CORS-Caching für CDNs Um im CDN oder Proxy zu cachen, folgende Header hinzufügen Cache-Control: public, max-age=86400 Vary: origin Wichtig ist: OPTIONS ist standardmäßig nicht cachebar, daher ist das nicht Teil des Standards. Die meisten CDNs unterstützen es jedoch Konfigurationsbeispiele Caching CORS with AWS Lambda Caching CORS in Node.js Caching CORS in Python Caching CORS with Java Spring

(httptoolkit.tech)

35 Punkte von xguru 2022-09-22 | 2 Kommentare | Auf WhatsApp teilen

Was ist ein CORS-Preflight?

Bevor eine komplexe Anfrage gesendet wird, wird zunächst per OPTIONS angefragt, ob die Berechtigung dafür besteht
In der Praxis benötigen das jedoch die meisten Anfragen tatsächlich (z. B. mit JSON-/XML-Body oder mit Credentials usw.)
Problematisch ist das, weil sich dadurch die Zeit bis zur eigentlichen Anfrage erhöht
- OPTIONS-Requests sind standardmäßig nicht cachebar, und auch CDNs verarbeiten sie daher meist nicht im Cache, sodass die Anfrage bis zum Server durchgereicht wird
- Diese Werte werden auf Client-Seite gecacht und standardmäßig nur 5 Sekunden lang behalten
  - Wenn also eine Webseite alle 10 Sekunden die API pollt, wird auch alle 10 Sekunden einmal ein Preflight ausgeführt
- In vielen Fällen erhöht das die API-Latenz im Browser-Client, sodass sich die wahrgenommene Performance für Nutzer halbiert
- Außerdem belastet es den API-Server unnötig und erhöht die Kosten
- Besonders dann, wenn man Serverless nutzt. Lambda, Netlify Functions, Cloudflare Workers und Google Cloud Functions berechnen alle pro Funktionsaufruf – und dieser Preflight zählt ebenfalls dazu

Wie man Preflight-Antworten cached

Im Browser cachen, damit keine unnötigen identischen Preflight-Requests gesendet werden
Auf CDN-Ebene cachen, damit diese Requests beantwortet werden können, ohne dass der eigentliche Backend-Server sie verarbeiten muss

CORS-Caching für Browser

Dem Preflight-Response folgenden Header hinzufügen: Access-Control-Max-Age: 86400
Firefox erlaubt bis zu 86400 (24 Stunden), Chromium-basierte Browser haben jedoch 7200 (2 Stunden) als Maximalwert

CORS-Caching für CDNs

Um im CDN oder Proxy zu cachen, folgende Header hinzufügen
Cache-Control: public, max-age=86400
Vary: origin
Wichtig ist: OPTIONS ist standardmäßig nicht cachebar, daher ist das nicht Teil des Standards. Die meisten CDNs unterstützen es jedoch

Konfigurationsbeispiele

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

2 Kommentare

nicewook 2022-09-23

Ich habe mir gerade diesen Teil angesehen und fand ihn interessant.

kofmania 2022-09-22

Von einer Leistungssteigerung ins Gegenteil -> auf die halbe Leistung