Mettre en cache CORS — pour les performances et les coûts

Qu'est-ce qu'une preflight CORS ?

• Il s'agit d'envoyer d'abord une requête OPTIONS pour vérifier les autorisations avant d'envoyer une requête complexe.
• Mais en pratique, la plupart des requêtes en ont besoin (présence d'un body JSON/XML, inclusion de credentials, etc.).
• C'est problématique parce que cela augmente le temps nécessaire à la requête réelle.
  • Les requêtes OPTIONS ne peuvent pas être mises en cache par défaut, et les CDN ne les traitent généralement pas non plus, donc la requête atteint le serveur.
  • Ces valeurs sont mises en cache côté client et ne sont conservées que 5 secondes par défaut.
    • Autrement dit, si une page web interroge une API toutes les 10 secondes, une preflight est effectuée une fois toutes les 10 secondes.
  • Dans bien des cas, cela augmente la latence API du client navigateur, au point que les performances perçues par l'utilisateur sont divisées par deux.
  • Cela impose aussi une charge inutile au serveur API et augmente les coûts.
  • C'est encore plus vrai en serverless. Lambda, Netlify Functions, Cloudflare Workers et Google Cloud Functions facturent tous à l'invocation, et cette preflight en fait partie.

Comment mettre en cache les réponses preflight

• Les mettre en cache dans le navigateur afin d'éviter l'envoi de requêtes preflight identiques et inutiles.
• Les mettre en cache au niveau CDN afin que ces requêtes puissent recevoir une réponse sans que le serveur backend réel ait à les traiter.

Mise en cache CORS pour les navigateurs

• Ajouter l'en-tête suivant à la réponse preflight : Access-Control-Max-Age: 86400
• Firefox permet jusqu'à 86400 (24 heures), mais le maximum pour les navigateurs basés sur Chromium est 7200 (2 heures).

Mise en cache CORS pour les CDN

• Pour la mise en cache sur le CDN ou le proxy, ajouter les en-têtes suivants :
  Cache-Control: public, max-age=86400
Vary: origin
• Point important : OPTIONS n'est pas mis en cache par défaut, donc ce n'est pas standard. Mais la plupart des CDN le prennent en charge.

Exemples de configuration

• Mise en cache de CORS avec AWS Lambda
• Mise en cache de CORS en Node.js
• Mise en cache de CORS en Python
• Mise en cache de CORS avec Java Spring

[nicewook]

Justement, j’étais en train de regarder cette partie, et j’ai trouvé ça intéressant.

[kofmania]

Les performances sont passées à l’inverse → les performances ont été divisées par deux