Backend Development

CORS 이해하기: 크로스 오리진 리소스 공유의 모든 것

Kun Woo Kim 2025. 5. 29. 01:02
728x90

서론

현대 웹 애플리케이션은 다양한 출처(Origin)의 리소스를 활용합니다. 이때 발생할 수 있는 보안 문제를 해결하기 위해 CORS(Cross-Origin Resource Sharing)가 등장했습니다. 본 글에서는 CORS의 개념, 필요성, 그리고 작동 방식을 상세히 설명하겠습니다.


CORS의 기본 개념

1. CORS란?

CORS는 서로 다른 출처 간의 리소스 공유를 가능하게 하는 보안 메커니즘입니다. 여기서 출처(Origin)는 다음 세 가지 요소로 구성됩니다:

  • 프로토콜 (http, https)
  • 도메인 (example.com)
  • 포트 (80, 443 등)

2. 출처 비교 예시

URL 1 URL 2 동일 출처 여부
https://example.com https://example.com O
https://example.com http://example.com X (프로토콜 다름)
https://example.com https://api.example.com X (도메인 다름)
https://example.com:80 https://example.com:443 X (포트 다름)

CORS의 필요성

1. 보안 문제의 역사

  • CSRF(Cross-Site Request Forgery): 악의적인 사이트가 사용자의 브라우저를 통해 다른 사이트에 요청을 보내는 공격
  • SOP(Same-Origin Policy): 동일 출처의 리소스만 접근 가능하도록 제한하는 브라우저 정책

2. 현대 웹의 요구사항

  • API 서버와 프론트엔드의 분리
  • CDN을 통한 리소스 제공
  • 마이크로서비스 아키텍처

CORS의 작동 방식

1. Simple Request

가장 기본적인 CORS 요청 방식입니다.

조건

  • GET, POST, HEAD 메서드
  • 특정 헤더만 사용
  • Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain

요청 예시

GET /api/data HTTP/1.1
Host: api.example.com
Origin: https://client.example.com

응답 예시

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://client.example.com

2. Preflight Request

복잡한 요청을 보내기 전에 먼저 확인하는 방식입니다.

요청 예시

OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: https://client.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type, Authorization

응답 예시

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://client.example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

3. Credential Request

인증 정보를 포함한 요청입니다.

요청 예시

fetch('https://api.example.com/data', {
  credentials: 'include',
  headers: {
    'Authorization': 'Bearer token123'
  }
});

응답 예시

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://client.example.com
Access-Control-Allow-Credentials: true

CORS 설정 방법

1. Spring Boot 설정

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

2. Node.js Express 설정

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
    origin: 'https://client.example.com',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true
}));

CORS 관련 문제 해결

1. 일반적인 오류

  • Access-Control-Allow-Origin 헤더 누락
  • 잘못된 출처 설정
  • 인증 정보 누락

2. 디버깅 방법

  • 브라우저 개발자 도구 확인
  • 서버 로그 분석
  • 네트워크 요청/응답 검사

결론

CORS는 현대 웹 애플리케이션의 필수적인 보안 메커니즘입니다. 적절한 CORS 설정은 보안을 유지하면서도 필요한 리소스 공유를 가능하게 합니다.

인사이트: CORS는 단순한 기술적 설정이 아닌, 웹 애플리케이션의 보안과 기능성을 동시에 고려해야 하는 중요한 설계 요소입니다. 개발자는 CORS의 동작 원리를 이해하고, 이를 적절히 활용해야 합니다.


참고 자료

728x90