CORS : Cross-Origin Resource Sharing



1. 브라우저 정책과 보안

브라우저는 보안상 이유로 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 특정 규칙에 따라 제한함.


SOP : Same-Origin Policy

  • 정의: 동일한 출처에서만 자원을 요청할 수 있도록 제한하는 보안 정책
  • 목적: 서로 다른 출처 간의 정보 공유를 방지하여, 악의적인 스크립트가 사용자 데이터를 도용하거나, 웹사이트 간의 공격을 시도하는 것을 차단
  • 구성: 프로토콜, 호스트, 포트 - https://www.example.com:443


CORS : Cross Origin Resource Sharing

  • 정의: CORS는 다른 출처에서 자원을 공유할 수 있도록 허용
  • 역할: 기본적으로 SOP에 의해 차단되는 요청을 허용해 주는 역할. 서버에서 특정 조건을 만족시키면, 브라우저가 다른 출처의 요청을 허용함



2. CORS 동작 원리

CORS는 브라우저와 서버 간의 요청/응답 헤더를 통해 다른 출처의 자원을 공유할 수 있도록 설정함


리퀘스트와 리스폰스 헤더

  • Origin 헤더 (요청 헤더)
    • 브라우저가 요청을 보낼 때, 현재 페이지의 출처를 Origin 헤더에 포함시킴

  • Access-Control-Allow-Origin 헤더 (응답 헤더)

    • 서버가 응답 시, 허용할 출처를 이 헤더에 지정
    • 브라우저는 요청의 Origin과 응답의 Access-Control-Allow-Origin을 비교하여 출처가 같은지 파악하여 허용 여부를 결정


CORS 동작 시나리오

  • Simple Request
    • 조건 : 특정한 헤더와 메서드(GET, POST, HEAD)만 사용해야 하며, 기본적인 콘텐츠 타입만 허용
    • 특징 : 추가적인 검증 없이 요청이 바로 전송. 거의 사용하지 않음
  • Preflight Request
    • 역할 :
      • 브라우저는 본 요청을 보내기 전에, 서버가 요청을 허용하는지 미리 확인하기 위해 OPTIONS 메서드로 예비 요청을 보냄.
      • 서버가 허용한 경우에만 본 요청이 전송
    • 특징 :
      • 대부분의 CORS 요청이 이 방식으로 처리
      • 서버는 Access-Control-Allow-Origin에 와일드카드(*)를 사용해 모든 출처를 허용가능
  • Credentialed Request
    • 조건 : 요청에 쿠키나 인증 헤더 같은 자격 증명(Credentials)이 포함된 경우 사용됨
    • 특징 :
      • 서버는 Access-Control-Allow-Origin에서 와일드카드를 사용할 수 없고 허용할 특정 출처를 지정해야 함
      • Access-Control-Allow-Credentials 헤더를 true로 설정해야 함

3. CORS 에러와 해결책

브라우저에서 SOP 정책때문에 요청이 막히면 콘솔에 CORS 에러가 발생한다. 그런데 왜 SOP 에러가 아니라 CORS에러라고 하는 거지? -> 브라우저 입장에서 다른 출처 요청이 들어왔을때, 별도의 CORS 설정을 해주면 다른 출처 요청을 보내줄께~ 라고 해서 CORS 에러를 던진다고 생각하면 됨


CORS 문제 해결 방법

  • 서버 측 설정 : 서버에서 응답 헤더에 Access-Control-Allow-Origin을 추가하여, 요청을 허용할 출처를 명시
  • 프론트엔드 설정 : 프론트엔드에서 서버에 요청할 때, 서버가 허용할 수 있도록 CORS 설정을 요청