CORS (Cross-Origin Resource Sharing) 완전 정복#

URL의 구성 요소#

URL은 다음과 같이 구성됨.

• Protocol (Scheme): http, https
• Host: 사이트 도메인 (예: www.domain.com)
• Port: 포트 번호 (예: 3000, 8080)
• Path: 내부 경로
• Query String: 요청의 key-value
• Fragment: 해시 태그

동일 출처(Same-Origin)의 기준#

브라우저는 Protocol, Host, Port 이 3가지가 모두 일치해야 ‘같은 출처’로 인식함. 하나라도 다르면 **다른 출처(Cross-Origin)**로 간주하여 차단

비교 예시 기준 URL: https://www.myshop.com (기본 포트 443)

참고: 출처 비교와 차단은 **‘브라우저’**가 수행함. 서버는 정상적으로 200 OK를 응답하더라도, 브라우저가 출처를 비교해 다르면 데이터를 버리고 에러를 띄움 (Server-to-Server 통신에서는 발생하지 않음)

SOP가 필요한 이유#

출처가 다른 애플리케이션끼리 자유롭게 통신하면 보안에 매우 취약해짐

• CSRF (Cross-Site Request Forgery): 사용자가 악성 사이트에 접속했을 때, 해커가 심어둔 코드가 사용자의 브라우저를 통해 로그인이 되어 있는 다른 사이트(은행, 포털 등)에 요청을 보내 개인정보를 탈취하거나 조작할 수 있음
• XSS (Cross-Site Scripting): 악성 스크립트 실행 방지

즉, SOP는 악의적인 스크립트가 실행되지 않도록 브라우저 차원에서 사전에 방지하는 안전장치임. 하지만 현대 웹에서는 외부 리소스 사용이 필수적이므로, CORS 정책을 지킨 요청에 한해 예외적으로 허용해주는 것

① 예비 요청 (Preflight Request)#

가장 일반적인 시나리오. 브라우저가 본 요청을 보내기 전에 안전한지 확인하기 위해 OPTIONS 메서드로 미리 찔러보는 것

• 과정:
  1. 브라우저 → 서버: OPTIONS 요청 (Origin, 사용할 메서드, 헤더 정보 포함)
  2. 서버 → 브라우저: 허용 여부 응답 (Access-Control-Allow-Origin 등)
  3. 브라우저: 안전하다 판단되면 실제 본 요청(Actual Request) 전송
• 캐싱: 매번 예비 요청을 보내면 성능이 저하되므로 Access-Control-Max-Age 헤더로 결과를 일정 시간 캐싱할 수 있음

② 단순 요청 (Simple Request)#

예비 요청 없이 바로 본 요청을 보내는 방식. 하지만 조건이 매우 까다로워 잘 쓰이지 않음

• 조건:
  • 메서드: GET, POST, HEAD 중 하나
  • 헤더: Accept, Content-Type 등 기본 헤더만 허용
  • Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain만 가능. (application/json은 불가능하므로 대부분 Preflight를 탐)

③ 인증된 요청 (Credentialed Request)#

클라이언트가 쿠키, 토큰 등 인증 정보를 포함해 요청을 보낼 때 사용함. 설정이 더 엄격

• 클라이언트 설정:
  • fetch, axios, jQuery 등에서 credentials: 'include' 또는 withCredentials: true 설정 필수
• 서버 설정 (중요):
  1. Access-Control-Allow-Credentials: true 로 설정해야 함
  2. Access-Control-Allow-Origin에 와일드카드()를 쓸 수 없음. 반드시 구체적인 출처(예: http://localhost:3000)를 명시해야 함

① 서버에서 헤더 설정 (백엔드)#

가장 정석적인 방법. 백엔드에서 허용할 출처를 명시

Spring Framework (Global 설정)

1
@Configuration
2
public class WebConfig implements WebMvcConfigurer {
3
    @Override
4
    public void addCorsMappings(CorsRegistry registry) {
5
        registry.addMapping("/**")
6
            .allowedOrigins("http://localhost:8080") // 허용할 출처
7
            .allowedMethods("GET", "POST") // 허용할 메서드
8
            .allowCredentials(true) // 인증 정보 허용
9
            .maxAge(3000); // Preflight 캐싱 시간
10
    }
11
}

Spring Framework (Controller 별 설정)

1
@CrossOrigin(origins = "*", methods = RequestMethod.GET)
2
@GetMapping("/url")
3
public ResponseEntity<?> findAll() { ... }

Nginx 설정

1
location /api/ {
2
    # CORS 헤더 추가
3
    add_header 'Access-Control-Allow-Origin' '*' always;
4
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
5
    add_header 'Access-Control-Allow-Credentials' 'true' always;
6

7
    # Preflight 요청 처리
8
    if ($request_method = OPTIONS) {
9
        return 204;
10
    }
11
}

② 프록시(Proxy) 서버 이용#

브라우저의 CORS 정책은 브라우저와 서버 간의 통신에서만 적용됨. 서버와 서버 간 통신에는 적용되지 않는 점을 이용

Webpack Dev Server (React 개발 환경) 개발 중에는 로컬 프록시를 띄워 CORS를 우회할 수 있음. 브라우저는 같은 출처인 로컬 프록시로 요청을 보내고, 프록시가 실제 백엔드로 요청을 전달하는 방식

• package.json 설정 예시:

  1
  {
  2
    "proxy": "https://myshop.com:8080"
  3
  }
  

주의: React의 Proxy 설정은 개발 환경(Development)에서만 동작함. 배포 시에는 백엔드나 Nginx 등에서 실제 CORS 설정을 해줘야 함