💡 완벽한 API 연동을 위한 CORS 및 캐시 최적화 가이드
현대의 웹 애플리케이션은 React, Vue.js 같은 프론트엔드(Client)와 Node.js, Spring Boot 등의 백엔드(API Server)가 각각 다른 도메인이나 포트에서 실행되는 구조를 가집니다. 이때 브라우저는 보안상의 이유로 동일 출처 정책(SOP, Same-Origin Policy)을 적용하여 다른 출처로의 리소스 요청을 차단하는데, 이것이 바로 개발자들을 괴롭히는 'CORS 에러'의 정체입니다.
1. CORS(Cross-Origin Resource Sharing) 해결의 핵심
CORS 에러를 해결하는 유일하고 올바른 방법은 클라이언트가 아닌 '백엔드 서버'에서 응답 헤더를 설정해 주는 것입니다.
Access-Control-Allow-Origin: API 접근을 허용할 프론트엔드의 정확한 도메인 주소(예: https://my-frontend.com)를 명시해야 합니다. 만약 세션 쿠키나 인증 토큰을 주고받기 위해Credentials: true옵션을 사용한다면, 이 값에*(전체 허용)를 설정할 수 없으므로 반드시 정확한 Origin을 적어주어야 합니다.Access-Control-Allow-Methods: 프론트엔드에서 사용할 수 있는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 명시적으로 허용합니다.
2. Preflight (OPTIONS) 요청과 Max-Age의 중요성
브라우저는 POST, PUT 등의 데이터를 수정하는 요청을 보내기 전에, 서버가 이를 허용하는지 먼저 확인하기 위해 OPTIONS 메서드로 사전 요청(Preflight Request)을 보냅니다. 문제는 이 Preflight 요청이 매번 발생하면 API 응답 속도가 2배로 느려진다는 점입니다.
이를 해결하기 위해 서버 응답 헤더에 Access-Control-Max-Age: 86400 (초 단위, 86400초 = 1일)을 설정해야 합니다. 이렇게 하면 브라우저가 첫 번째 사전 요청 결과를 캐싱해두고, 하루 동안은 불필요한 OPTIONS 요청을 생략하여 API 통신 속도가 비약적으로 향상됩니다.
3. CDN 캐싱 정책 (Cache-Control) 튜닝 가이드
API 응답 속도를 높이고 데이터베이스 부하를 줄이기 위해서는 Cache-Control 헤더 설정이 필수적입니다.
- 동적 데이터 (보안 필요): 로그인 세션 정보, 장바구니, 결제 내역 등은 절대 캐시되면 안 됩니다. 반드시
no-store, no-cache, must-revalidate를 설정하세요. - 정적 데이터 (공용 API): 블로그 게시글 목록, 상품 카테고리 등 자주 변하지 않는 데이터는
public, max-age=3600(1시간 캐시)을 설정하여 데이터베이스 히트(Hit)율을 획기적으로 낮출 수 있습니다. - CDN 전용 캐싱 (Cloudflare 등):
s-maxage지시어를 사용하면 사용자 브라우저에는 캐시하지 않으면서 글로벌 Edge 서버(CDN)에만 데이터를 캐싱할 수 있어, 업데이트 발생 시 Purge(캐시 삭제) 관리가 훨씬 수월해집니다.