35 puntos por xguru 2022-09-22 | 2 comentarios | Compartir por WhatsApp

¿Qué es un preflight de CORS?

  • Antes de enviar una solicitud compleja, primero se hace una petición OPTIONS para verificar si tiene permisos.
  • Pero en la práctica, la mayoría de las solicitudes lo necesitan de todos modos (por ejemplo, si tienen un body JSON/XML o incluyen credenciales, etc.).
  • Lo malo de esto es que aumenta el tiempo que tarda la solicitud real.
    • Las solicitudes OPTIONS no se pueden cachear de forma predeterminada, así que los CDN normalmente tampoco las procesan y la solicitud termina llegando hasta el servidor.
    • Estos valores se cachean en el cliente y, por defecto, solo se conservan durante 5 segundos.
      • Es decir, si una página web hace polling a una API cada 10 segundos, habrá un preflight una vez cada 10 segundos.
    • En muchos casos, esto aumenta la latencia de la API para el cliente del navegador, y desde la perspectiva del usuario el rendimiento se reduce a la mitad.
    • Además, genera una carga innecesaria en el servidor de la API y aumenta los costos.
    • Especialmente si usas serverless. Lambda, Netlify Functions, Cloudflare Workers y Google Cloud Functions cobran por invocación, así que este preflight también cuenta.

Cómo cachear la respuesta del preflight

  • Cachearla en el navegador para evitar enviar solicitudes de preflight idénticas e innecesarias.
  • Cachearla en la capa del CDN para que estas solicitudes se respondan sin que el backend real tenga que procesarlas.

CORS caching for browsers

  • Agrega el siguiente header en la respuesta del preflight: Access-Control-Max-Age: 86400
  • Firefox permite hasta 86400 (24 horas), pero en los navegadores basados en Chromium el valor máximo es 7200 (2 horas).

CORS caching for CDNs

  • Para cachearlo en el CDN o proxy, agrega los siguientes headers:
    Cache-Control: public, max-age=86400
    Vary: origin
  • Lo importante es que OPTIONS no está definido para cachearse por defecto, así que esto no es estándar. Aun así, la mayoría de los CDN lo soportan.

Ejemplos de configuración

  • Cachear CORS con AWS Lambda
  • Cachear CORS en Node.js
  • Cachear CORS en Python
  • Cachear CORS con Java Spring

2 comentarios

 
nicewook 2022-09-23

Justo estaba viendo esta parte y me pareció interesante.

 
kofmania 2022-09-22

El rendimiento quedó a la mitad -> El rendimiento quedó reducido a la mitad