시작하기에 앞서 이 글을 참조했음을 밝힙니다.

https://medium.com/@lifthus531/cors에-대한-깊은-이해-8c84c2137c83

Cross-Origin Resource Sharing (

Cross-Origin Resource Sharing (CORS)는 http header 기반 매커니즘이다.

브라우저가 리소스 로드를 허용해야 하는 자체원본이 아닌 다른 원본 (domain, scheme or port)을 서버가 나타낼수 있도록 합니다.

  • 브라우저는 유저의 보안을 위해 기본적으로 Same-Origin Policy를 적용합니다.
  • 리소스의 프로토콜, 호스트, 포트번호가 같은 경우에만 통신을 허락하는 정책입니다.

하지만 위와 같이 정책을 규제할수만은 없으므로, 다른 곳에 있는 리소스에 안전하게 접근할 수 있도록 HTTP 헤더에 기반한 CORS라는 장치가 주어집니다.

그리고 브라우저는 이 CORS 정책에 기반해 서로 다른 곳에서 기인한 리소스들 사이의 HTTP 통신을 필터링합니다.

CORS 정책은 브라우저에 의해 실행

서버 간의 통신에는 적용되지 않습니다.

특정 origin을 차단하는 행위는 서버에서도 충분히 가능하지만, cors 정책 자체는 브라우저에서 브라우저 사용자를 보호하기 위한 장치입니다.

cors 정책은 서버가 결정하고, 그 실행은 브라우저가 맡습니다.

CORS는 사용자를 지키는 보안 장치라기 보다는 개발자가 개발하기 편하도록 보안을 완화시켜주는 장치

브라우저에서는 Same-Origin Policy가 기본적으로 적용되므로, CORS를 통해서 SOP를 우회해 다른 동네와 소통할 수 있도록 해주는 장치입니다.

Client (Frontend)

HTTP 요청에 credentials를 포함합니다.

여기서 credentials는 쿠키, authorization 헤더, TLS client certificates를 의미합니다.

credentials 속성은 “omit”, “same-site”, “include” 세 가지 값을 허용합니다.

  • omit: credentials를 요청에 포함하지 않습니다.
  • same-site: 속성의 기본 값이며 같은 사이트에 대해서만 credentials를 포함합니다.
  • include: 다른 사이트라도 credentials를 포함합니다.

예제 코드

fetch('https://example.com/hello', {
  method: 'GET',
  credentials: 'include'
})

axios.get('https://example.com/hello', {
  withCredentials: true
})

Server (Backend)

  • 어떤 Origin, Method, Header를 허용 할 지 명시해 줘야 한다.
  • Credentials 도 허용해 줘야 합니다.

Preflight 요청

  • 브라우저는 내부적으로 진짜 요청을 보내기전에 OPTIONS라는 메서드로 Preflight 요청을 보내어 CORS와 관련해 서버에게 이 요청을 보내도 되는지 미리 물어봅니다.
  • Simple Request로 정의되는 몇몇 겨우에 대해서는 Preflight을 보내지 않지만 일단 기본적으로 Preflight Request라는게 있다는 걸 알아두어야 합니다.
  • 많은 웹 프레임워크들은 OPTIONS 메서드를 CORS 미들웨어 등에서 처리해주지만 그렇지 않은 경우 OPTIONS 메서드에 대해서 직접 핸들링해줘야 합니다.

예제코드

w.Header().Set("Access-Control-Allow-Origin", "https://example.com")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "Authorization, Origin")
w.Header().Set("Access-Control-Allow-Credentials", "true")

Access-Control-Allow-Origin

  • 허용되는 Origin을 특정한다.
  • null로 설정하는 것은 금지의 의미로 사용 불가

Access-Control-Allow-Methods

  • 허용되는 Method를 특정한다.
  • 컴마(,)로 구분해 여러 메서드를 허용 가능

Access-Control-Allow-Headers

  • Preflight 요청 후 실제 요청에서 포함될 헤더를 특정

Access-Control-Allow-Credentials

클라이언트에서 설정한 Credentials가 요청에 포함되어 있을때, 이에 대한 응답을 클라이언트 코드에서 접근 가능하도록 노출 할 지 여부를 정합니다.

Origin, Methods, Headers 중 하나라도 Wildcard (*) 지정 시 Credentials 허용 불가

← Go home