CORS (Cross-Origin Resource Sharing)

교차 출처 리소스 공유(CORS, Cross-Origin Resource Sharing)는 브라우저가 다른 출처의 리소스 요청을 안전하게 허용하기 위해 만든 HTTP 헤더 기반의 표준 메커니즘이다. 브라우저는 기본적으로 동일 출처 정책에 따라 스크립트가 다른 출처의 응답을 읽지 못하게 막는데, 서버가 CORS 헤더로 명시적으로 허용한 경우에만 이 제한을 풀어 준다. 따라서 개발자가 흔히 만나는 CORS 에러는 브라우저의 버그가 아니라 서버가 허용 의사를 밝히지 않았다는 신호다.

동일 출처 정책과 출처의 정의

동일 출처 정책(SOP, Same-Origin Policy)은 한 출처에서 실행되는 스크립트가 다른 출처의 응답 내용에 접근하지 못하게 하는 브라우저 보안 규칙이다. 출처(origin)는 프로토콜, 호스트, 포트 세 가지의 조합으로 정의되며 셋 중 하나라도 다르면 다른 출처로 취급된다.

• https://devfit.dev 와 http://devfit.dev 는 프로토콜이 달라 다른 출처다.
• https://devfit.dev 와 https://api.devfit.dev 는 호스트가 달라 다른 출처다.
• http://localhost:3000 과 http://localhost:8080 은 포트가 달라 다른 출처다.

이 정책이 없다면 악성 사이트의 스크립트가 사용자의 브라우저에 저장된 인증 쿠키를 실어 은행 API를 호출하고 그 응답을 그대로 읽어 갈 수 있다. SOP는 이런 정보 탈취를 원천 차단하고, CORS는 그중 신뢰할 수 있는 교차 출처 요청만 선별적으로 열어 주는 완화 장치다. 중요한 점은 이 검사가 브라우저에서만 일어난다는 것이다. 서버 간 통신이나 curl 요청에는 CORS가 적용되지 않는다.

단순 요청과 프리플라이트

브라우저는 교차 출처 요청을 두 부류로 나누어 처리한다.

단순 요청(Simple Request)

GET, HEAD, POST 메서드이면서 Content-Type이 text/plain, multipart/form-data, application/x-www-form-urlencoded 중 하나이고 커스텀 헤더가 없는 요청이다. 브라우저는 이 요청을 바로 보내되, 응답에 Access-Control-Allow-Origin 헤더가 없으면 응답 내용을 스크립트에 넘기지 않고 버린다. 즉 요청 자체는 서버에 도달하며, 차단되는 것은 응답의 열람이다.

프리플라이트 요청(Preflight Request)

PUT, DELETE, PATCH 메서드를 쓰거나 Content-Type: application/json 또는 Authorization 같은 헤더를 붙이면 브라우저가 본 요청 전에 OPTIONS 메서드로 사전 확인을 보낸다. 동작 과정은 다음과 같다.

1. 브라우저가 OPTIONS 요청에 Origin, Access-Control-Request-Method, Access-Control-Request-Headers 헤더를 담아 보낸다.
2. 서버가 허용 출처, 허용 메서드, 허용 헤더를 응답 헤더로 알려 준다.
3. 브라우저가 본 요청의 조건이 허용 범위에 들어가는지 검사한다.
4. 통과하면 본 요청을 보내고, Access-Control-Max-Age에 지정된 시간 동안 프리플라이트 결과를 캐시해 반복을 줄인다.

OPTIONS /api/users HTTP/1.1
Origin: https://devfit.dev
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://devfit.dev
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://devfit.dev")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Content-Type", "Authorization")
                .allowCredentials(true)
                .maxAge(3600);
    }
}