💡 완벽한 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(캐시 삭제) 관리가 훨씬 수월해집니다.
API를 개발하면서 가장 자주 마주치는 벽은 CORS(Cross-Origin Resource Sharing) 에러입니다. 이는 브라우저가 보안을 위해 다른 도메인 간의 리소스 요청을 제한하기 때문에 발생합니다. 본 도구는 이러한 복잡한 설정을 자동화하여 개발 생산성을 높여줍니다.
1. CORS 에러의 근본적인 원인과 해결법
브라우저는 Same-Origin Policy를 준수합니다. 만약 클라이언트가 domain-a.com이고 API가 api-b.com이라면, 서버 응답 헤더에 반드시 Access-Control-Allow-Origin: domain-a.com이 포함되어야 합니다. 그렇지 않으면 데이터는 전송되더라도 브라우저가 이를 폐기합니다.
2. Preflight(OPTIONS) 요청 최적화
브라우저는 데이터 수정 요청(POST, PUT 등) 전 OPTIONS 메서드를 통해 서버의 허용 여부를 먼저 확인합니다. 이 과정이 매번 일어나면 서비스가 느려집니다. Access-Control-Max-Age 헤더를 사용하여 이 확인 결과를 브라우저에 캐싱하는 것이 성능 최적화의 핵심입니다.
3. CDN 캐시 정책 활용하기
서버의 부하를 줄이려면 Cloudflare나 Bunny CDN 같은 엣지 서버를 활용해야 합니다. Cache-Control: s-maxage를 설정하면 브라우저 캐시와는 별개로 CDN 노드에만 데이터를 저장하여, 전 세계 어디서든 빠른 응답 속도를 보장할 수 있습니다.
❓ 자주 묻는 질문 (FAQ)
보안상 위험할 뿐만 아니라, 인증 정보(Cookies, Auth Headers)를 포함하는 요청에서는 *를 사용할 수 없습니다. 반드시 명시적인 도메인을 입력해야 합니다.
Nginx에서 설정할 경우 백엔드 애플리케이션(Express 등)에서도 중복으로 헤더를 보내고 있지 않은지 확인하세요. 중복 헤더는 브라우저에서 거부될 수 있습니다.
403은 서버가 요청을 거부한 것이고, CORS 에러는 서버는 응답했으나 브라우저가 보안상 막은 것입니다. 콘솔 창의 메시지를 정확히 확인하는 것이 중요합니다.