CORS(Cross-Origin Resource Sharing)

Table of Contents

1. CORS(Cross-Origin Resource Sharing)란?

CORS(교차 출처 리소스 공유)는 웹 보안 기능 중 하나로, 다른 출처(도메인, 프로토콜, 포트)의 리소스에 대한 요청을 제어하는 메커니즘입니다. 웹 브라우저는 기본적으로 동일 출처 정책(Same-Origin Policy, SOP)을 따르며, 이를 우회하여 특정 출처에서 리소스를 허용할 수 있도록 하는 것이 CORS입니다.

예시로 itstack.co.kr에서 로또 사이트를 만들면서, 동행복권 사이트의 resource를 표시할 경우 동행복권사이트에서 응답 해더에 Access-Control-Allow-Origin 허용을 포함하여 보내지 않으면 CORS오류가 발생합니다.

2. CORS가 필요한 이유

웹 브라우저는 보안상의 이유로, 기본적으로 다른 출처(origin)에서의 리소스 요청을 차단합니다. 그러나 다음과 같은 경우에는 교차 출처 요청이 필요합니다.

API 서버와 프론트엔드 서버가 다른 도메인에 존재하는 경우
CDN(Content Delivery Network)을 통해 정적 자원을 불러오는 경우
마이크로서비스 아키텍처에서 서로 다른 서비스 간 HTTP 통신이 필요한 경우

이러한 경우, 서버가 CORS 정책을 설정하여 특정 출처에서의 요청을 허용할 수 있도록 조정해야 합니다.

3. CORS 동작 방식

브라우저는 교차 출처 요청을 감지하면, 요청 헤더에 Origin을 포함하여 서버로 전송합니다.

서버가 요청을 허용하는 경우: 응답 헤더에 CORS 관련 허용 규칙을 포함하여 반환함
서버가 요청을 허용하지 않는 경우: 브라우저가 요청을 차단하고 콘솔에 CORS 오류를 출력함

4. CORS 관련 주요 HTTP 헤더

요청 헤더(Request Headers)
- Origin: 요청을 보내는 출처(예: https://example.com)
응답 헤더(Response Headers)
- Access-Control-Allow-Origin: 허용할 출처 (예: * 또는 특정 도메인)
- Access-Control-Allow-Methods: 허용할 HTTP 메서드 (예: GET, POST, PUT, DELETE)
- Access-Control-Allow-Headers: 허용할 요청 헤더 (예: Content-Type, Authorization)
- Access-Control-Allow-Credentials: 인증 정보(쿠키 등) 포함 여부 (true 또는 false)