Pure’s Dev Blog
AboutBlog
CORS

CORS

생성일
Oct 19, 2024 10:35 AM
최종 편집 일시
Last updated October 28, 2024
태그
CS

CORS (Cross-Origin Resource Sharing)

웹 애플리케이션이 다른 출처에서 자원을 요청할 때 브라우저 보안 정책에 의해 차단되지 않도록 허용하는 메커니즘이다.
기본적으로 브라우저는 보안 상의 이유로 서로 다른 출처에서의 요청을 제한하는 동일 출처 정책을 따른다.
그러나 CORS를 사용하면 이 정책을 우회해 특정 외부 출처에서 자원을 안전하게 공유할 수 있다.

동일 출처 정책 (Same-Origin Policy)

웹 브라우저는 기본적으로 보안 상의 이유로 동일 출처에서만 자원 접근을 허용한다.
출처는 도메인, 프로토콜, 포트의 조합으로 정의된다.
이 동일 출처 정책을 통해 CSRF(Cross-Site Request Forgery), XSS(Cross-Site Scripting) 공격을 예방하는 데 중요한 역할을 한다.
하지만, API 서버와 클라이언트가 다른 도메인에 있을 때는 동일 출처 정책 때문에 자원 접근에 제한이 생긴다.
이 때 CORS가 사용된다.

CORS 동작 방식

CORS는 서버가 브라우저에게 다른 출처의 자원 접근을 허용할 지 결정하게 하는 방식이다. 브라우저는 클라이언트가 다른 출처로 요청을 보내면, 해당 서버에 CORS 요청 헤더를 추가하여 자원을 요청한다. 서버는 이 요청을 허용할 지 여부를 응답 헤더로 결정한다.

CORS 요청 흐름

  1. 브라우저에서 클라이언트가 요청
    1. 클라이언트는 다른 출처에 있는 리소스에 접근하려고 할 때, CORS 요청을 브라우저에 보낸다.
  1. 브라우저에서 서버로 CORS 요청을 보냄
    1. 브라우저는 서버로 Origin 헤더와 함께 요청을 전송한다. 자원을 허용할지 서버의 응답을 기다린다.
    2. Origin: https://example.com
  1. 서버가 CORS 정책에 따라 응답
    1. 서버는 응답에 CORS 허용 여부를 결정하는 헤더를 포함하여 브라우저에 보낸다.
    2. Access-Control-Allow-Origin: https://example.com
  1. 브라우저가 응답을 확인
    1. 브라우저는 서버의 응답을 확인한 후, 서버가 요청을 허용한 경우 자원을 사용할 수 있게 해준다. 허용되지 않은 경우 에러를 발생시킨다.

CORS 요청 유형

CORS 요청은 크게 두 가지 유형으로 나눌 수 있다.
단순 요청 과 프리플라이트 요청이다.
  1. 단순 요청
    1. 브라우저는 특정 조건을 만족하는 요청을 단순 요청으로 처리한다.
    2. 단순 요청은 프리플라이트 없이 바로 서버로 보내진다.
    3. 조건
      1. GET, POST, HEAD 메서드 중 하나를 사용
      2. 요청에 커스텀 헤더를 포함하지 않음
      3. Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain일 때
    4. 서버는 이 요청을 받으면 CORS 허용 응답 헤더를 포함해 응답을 반환할 수 있다.
  1. 프리플라이트 요청
    1. 단순 요청이 아닌 경우, 브라우저는 실제 요청을 보내기 전에 서버에 사전 요청 (OPTIONS 메서드)을 보내 자원 접근이 허용되는지 확인한다. 이러한 요청을 프리플라이트 요청이라고 한다.
    2. 예를 들어 클라이언트가 PUT, DELETE 메서드를 사용하거나, 커스텀 헤더를 포함할 때, 브라우저는 먼저 OPTIONS 요청을 보내서 서버가 허용하는지 확인한다.
  1. CORS 관련 헤더
    1. Access-Control-Allow-Origin
      1. 서버가 허용하는 출처를 명시한다.
      2. 특정 출처만 허용하거나, 모든 출처를 허용할 수 있다.
    2. Access-Control-Allow-Methods
      1. 서버가 허용하는 HTTP 메서드를 지정한다.
    3. Access-Control-Allow-Headers
      1. 서버가 허용하는 요청 헤더를 명시한다.
      2. Acess-Control-Allow-Headers: Content-Type, Authorization
    4. Access-Control-Allow-Credentials
      1. 자격 증명(쿠키, HTTP 인증)을 허용할지 여부를 나타낸다.
      2. Access-Control-Allow-Credentials: true 가 설정되어 있으면 서버는 클라이언트의 쿠키 및 인증 정보를 허용한다.
    5. Access-Control-Expose-Headers
      1. 브라우저에서 접근 가능한 서버 응답 헤더를 명시한다.
      2. 기본적으로 몇몇 안전한 헤더만 접근할 수 있기 때문에 추가적인 헤더를 노출하려면 이 헤더를 사용한다.

CORS 설정 방법

서버에서 CORS를 설정하는 방법은 사용하는 프레임워크나 서버 기술에 따라 다르다.

JAVA에서 처리하기

메서드나 컨트롤러 별로 @CrossOrigin(origins = “주소”)를 붙여서 따로따로 처리하거나 Spring Security를 사용해서 설정해 줄 수 있다.
Copyright 2025 Pure