CORS preflight 란 ?
- 복잡한 요청을 보내기 전에 OPTIONS로 권한을 있는지 먼저 요청하는 것
- 하지만 실제로는 대부분의 요청들이 이걸 필요로 함 (JSON/XML 바디가 있거나 크레덴셜을 포함하거나 등등 )
- 이게 나쁜 이유는 실제 요청에 걸리는 시간이 늘어난 다는 것
- OPTIONS 리퀘스트는 기본적으로 캐싱이 불가능해서, CDN들도 보통 처리하지 않아 요청이 서버까지 도달함
- 이 값들은 클라이언트에서 캐싱되며 기본적으로 5초만 유지됨.
- 즉 웹페이지가 API 폴링을 10초마다 한다면 preflight가 10초마다 한번씩 이루어짐
- 많은 경우 브라우저 클라이언트의 API 레이턴시를 증가시켜, 사용자 입장에서 성능이 절반으로 떨어짐
- 또한 API 서버에 쓸데없는 부담을 주고 비용을 증가 시킴
- 특히나 서버리스라면 더더욱. Lambda, Netlify Functions, Cloudflare Workers, Google Cloud Functions 모두 함수 호출당 비용을 받으므로, 이 preflight 도 그것에 포함됨
preflight 응답을 캐쉬하는 방법
- 브라우저에서 캐싱해서, 불필요한 동일 preflight 요청을 보내지 않게 만들기
- CDN 레이어에서 캐싱해서, 이 요청들을 실제 백엔드 서버가 처리할 필요없이 응답하도록 처리하기
CORS caching for browsers
- preflight 응답에 다음 헤더를 추가
Access-Control-Max-Age: 86400
- Firefox는 86400(24시간) 까지 가능하지만 크로미엄 기반 브라우저는 7200(2시간)이 최대 값
CORS caching for CDNs
- CDN 또는 프록시에서 캐슁하기 위해서 다음 헤더를 추가
Cache-Control: public, max-age=86400
Vary: origin
- 중요한 건 OPTIONS는 기본적으로 캐싱하게 되어있지 않기 때문에 표준이 아니라는 것. 하지만 대부분의 CDN이 지원함
Configuration 예제
- Caching CORS with AWS Lambda
- Caching CORS in Node.js
- Caching CORS in Python
- Caching CORS with Java Spring