[Web 일반] CORS 란?

CORS 란

Cross-Origin Resource Sharing(CORS)는 웹 브라우저에서 서로 다른 출처(origin) 간의 자원 요청을 허용 또는 제한하기 위해 사용하는 보안 기능.  (CORS 는 대부분 브라우저 관련 이슈)

 

교처 출처에 대한 자원 요청을 허용 하더라도 보안적으로 안전하게 하기 위한 작업을 수행.

 

CORS 배경

Origin 에 대해 다르다는 것은 다음 3가지 요소들이 다를 때 출처가 다르다고 한다.

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

 

웹 브라우저는 보안상의 이유로 기본적으로 동일 출처 정책(Same-Origin-Policy)를 따른다.

 

동일 출처 정책 : 한 출처(fe-domain.com) 에서 로드된 웹 페이지가 다른 출처(be-api-domain.com)의 리소스에 접근하는 것

 

즉, 동일 출처 정책에 의해 다른 출처의 리소스에 접근시, 브라우저는 기본적으로 차단하게 되어 있음.

이때, 서로 다른 출처 간의 자원 공유가 필요한 경우 CORS가 활용됨. 

 

CORS 역할

CORS는 서버(be)가 특정 출처(fe)에서의 요청을 허용하도록 해주고,

 

이 허용에 대한 승낙/거절 과정은 HTTP 헤더를 통해 이루어지게 됨.

 

주로 사용하는 CORS 헤더

• Access-Control-Allow-Origin: 요청을 허용할 출처를 지정합니다. 모든 출처를 허용하려면 *로 설정
• Access-Control-Allow-Methods: 허용할 HTTP 메서드를 지정 (예: GET, POST, PUT).
• Access-Control-Allow-Headers: 허용할 HTTP 헤더를 지정
• Access-Control-Allow-Credentials: 자격 증명(쿠키, 인증 헤더 등)을 포함한 요청을 허용할지 여부를 지정

 

CORS 예시

1. S3 에 자원 접근을 유효하게 하기 위해 다음과 같은 설정을 필요로 하기도 한다. 

• S3 에 업로드만 한다면 , POST, PATCH, PUT 등 
• 만약 조회도 한다면 GET

[
    {
    	// 인증, 자격을 위한 헤더 허용
        "AllowedHeaders": [
            "*"
        ],
        // 허용 http 메소드
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT"
        ], 
        // 모든 곳에서 허용
        "AllowedOrigins": [
            "*"
        ],
    }
]

 

 

2. django 에서 cors 관련 셋팅

# 모든 출처 허용 X
CORS_ALLOW_ALL_ORIGINS = False

# 출처 허용 리스트
CORS_ORIGIN_WHITELIST = [
    "https://domain.co.kr",
    "http://127.0.0.1:3000",
    "http://localhost:5173"
]
CSRF_TRUSTED_ORIGINS = CORS_ORIGIN_WHITELIST

# 출처에서 헤더 적용
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGIN_REGEXES = [
    r"^https?:\/\/(?:\w+\-?)+\.domain\.co\.kr$",
]

 

3. NextJS 

• SSR 서버는 CORS에 대해서 (동일 서버이기 때문에) 처리할 필요 X