CORS(Cross-Origin Resource Sharing)

by

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 헤더

  1. 요청 헤더(Request Headers)
    • Origin: 요청을 보내는 출처(예: https://example.com)
  2. 응답 헤더(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)

5. Preflight Request(사전 요청)

브라우저는 안전하지 않은 요청(예: PUT, DELETE 또는 특정 헤더 포함)을 보내기 전에, OPTIONS 메서드를 사용해 서버가 요청을 허용하는지 먼저 확인합니다. 이를 Preflight Request(사전 요청)라고 합니다.

6. CORS 오류 해결 방법

  1. 서버에서 Access-Control-Allow-Origin을 적절히 설정
  2. Nginx 또는 Apache에서 CORS 관련 헤더 추가
  3. 클라이언트에서 프록시 서버를 사용하여 같은 출처처럼 요청 우회

CORS는 보안과 유연성을 동시에 고려해야 하는 중요한 웹 기술로, 서버에서 올바르게 설정해야 정상적으로 작동합니다. 🚀

Leave a Comment