웹 개발을 하다 보면 종종 마주치는 단어 중 하나가 바로 CORS(Cross-Origin Resource Sharing)이다. 이는 서로 다른 출처(origin) 간에 리소스를 주고받을 수 있도록 해주는 보안 메커니즘이다. 현대 웹 애플리케이션에서 CORS는 필수적인 기술 중 하나로 자리 잡았다. 이번 글에서는 CORS의 개념부터 작동 원리, 설정 방법, 주의할 점까지 순차적으로 살펴보자.
🤔 CORS란 무엇인가?
CORS는 Cross-Origin Resource Sharing의 약자로, 출처가 다른 리소스 간의 HTTP 요청을 가능하게 해주는 기술이다. 예를 들어, https://frontend.com에서 https://api.backend.com의 API를 호출할 경우, 브라우저는 이를 기본적으로 차단한다. 이때 서버가 CORS 설정을 통해 특정 도메인의 요청을 허용하면, 클라이언트는 다른 출처의 리소스에 접근할 수 있게 된다.
🛠️ 브라우저의 보안 정책과 CORS의 역할
브라우저는 보안상의 이유로 SOP(Same-Origin Policy)라는 정책을 기본 적용하고 있다. 이는 스크립트에서 다른 출처의 리소스를 임의로 호출하지 못하도록 제한하는 정책이다. 하지만 현대의 웹은 프론트엔드와 백엔드가 분리되어 있거나, 외부 API를 활용하는 경우가 많아 이러한 제약은 불편함을 초래한다. 이 문제를 해결하기 위한 방법이 바로 CORS이다.
🔥 CORS의 작동 원리
CORS는 HTTP 헤더 기반으로 작동한다. 클라이언트가 서버에 요청을 보낼 때, 브라우저는 이 요청이 교차 출처 요청인지 확인하고, 서버로부터 적절한 CORS 관련 응답 헤더가 오는지를 판단한다. 서버가 요청을 허용하는 경우, 브라우저는 응답을 처리한다.
대표적인 CORS 관련 헤더는 다음과 같다.
Access-Control-Allow-Origin: 요청을 허용할 도메인을 명시한다.
Access-Control-Allow-Methods: 허용할 HTTP 메서드(GET, POST 등)를 지정한다.
Access-Control-Allow-Headers: 요청 시 사용할 수 있는 헤더를 정의한다.
🎯실제 예시로 이해해보자
- 프론트엔드 도메인 :
https://frontend.com - 백엔드 API 도메인 :
https://api.backend.com
클라이언트에서 API를 호출했을 때, 백엔드 서버가 다음과 같은 헤더를 응답에 포함한다면
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST브라우저는 이를 승인하고, 클라이언트는 해당 API로부터 응답을 받을 수 있게 된다. 만약 서버가 Access-Control-Allow-Origin: *로 설정했다면, 모든 도메인의 요청을 허용하는 것이 된다.
⚠️ 다만 이는 보안상 주의가 필요하다.
🛠️ CORS 설정 방법
서버의 종류에 따라 CORS 설정 방식은 조금씩 다르다. 아래는 Node.js의 Express 환경에서 CORS를 설정하는 예시이다.
const cors = require('cors');
app.use(cors()); // 모든 출처에서의 요청 허용혹은 특정 도메인만 허용하려면
app.use(cors({
origin: 'https://frontend.com'
}));Spring Boot에서는 다음과 같이 컨트롤러 단위 혹은 글로벌 설정을 통해 적용할 수 있다
@CrossOrigin(origins = "https://frontend.com")
@GetMapping("/api/data")
public ResponseEntity<String> getData() {
return ResponseEntity.ok("data");
}⚠️ CORS 오류와 해결 방법
가장 흔하게 마주치는 오류 메시지는 다음과 같다.
CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
이는 서버 응답에 CORS 관련 헤더가 누락되었음을 의미한다. 서버 측에서 적절한 Access-Control-Allow-* 헤더를 추가해주면 해결할 수 있다.
✅ 마무리하며
CORS는 강력한 보안 도구이자 양날의 검이다. 편의를 위해 Access-Control-Allow-Origin: *처럼 설정할 경우, 누구나 민감한 리소스에 접근할 수 있게 되어 보안 취약점을 초래할 수 있다. 민감한 정보가 오가는 API는 반드시 신뢰된 도메인만 명시적으로 허용해야 한다.
CORS는 현대 웹 애플리케이션의 분산 구조에서 없어서는 안 될 중요한 기술이다. 출처가 다른 리소스 간의 요청을 안전하게 허용하면서도 보안을 유지할 수 있도록 돕는다. 정확한 이해와 올바른 설정을 통해 CORS를 효과적으로 활용해보자.
