CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 웹 애플리케이션에서 서로 다른 도메인(출처) 간에 리소스를 공유할 수 있도록 허용하는 보안 정책입니다.
웹 브라우저는 보안을 위해 기본적으로 Same-Origin Policy(동일 출처 정책)을 적용하는데, 이를 통해 다른 도메인의 API나 리소스를 무분별하게 요청하는 것을 차단합니다.
하지만, CORS를 사용하면 특정 조건하에 다른 도메인의 리소스에 안전하게 접근할 수 있도록 허용할 수 있습니다.
예시
1. CORS 정책이 적용되는 상황
| 요청 유형 | 설명 | 예제 |
|---|---|---|
| Same-Origin Policy 적용 | 같은 도메인에서 요청 시 정상 작동 | https://example.com → https://example.com/api/data |
| CORS 차단 | 서로 다른 도메인 간 요청 시 차단됨 | https://example.com → https://api.another.com/data |
| CORS 허용 | 서버에서 CORS 설정을 통해 다른 도메인 허용 | https://example.com → https://api.allowed.com/data |
2. CORS 오류 발생 예제
fetch("https://api.another.com/data")
.then(response => response.json())
.catch(error => console.error("CORS 오류 발생:", error));위 코드에서 https://example.com 웹사이트에서 https://api.another.com/data에 요청을 보내면,
서버가 CORS를 허용하지 않은 경우 CORS 오류가 발생합니다.
3. CORS를 허용한 응답 헤더
만약 서버에서 CORS를 허용하려면 응답(Response) 헤더에 다음과 같은 값을 포함해야 합니다.
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type이렇게 설정하면 특정 도메인(https://example.com)에서 API 요청을 허용할 수 있습니다.
CORS 활용 범위
1. API 통신
- 클라이언트(웹 브라우저)에서 다른 도메인의 API 서버에 요청할 때 CORS 설정이 필요합니다.
- 예제:
https://myapp.com에서https://api.external.com의 데이터를 가져올 때.
2. CDN(Content Delivery Network) 사용
- 정적 파일(CSS, JavaScript, 이미지 등)을 CDN에서 제공할 경우, CORS 설정을 통해 외부 도메인에서도 리소스를 안전하게 사용할 수 있습니다.
3. OAuth 및 소셜 로그인
- Google, Facebook 로그인 등 외부 인증 서비스와의 통신 시 CORS 정책이 적용됩니다.
주의할 점
1. 보안 위험
Access-Control-Allow-Origin: *설정은 모든 도메인에서 요청을 허용하므로, 보안적으로 취약할 수 있습니다.- 특정 도메인만 허용하는 것이 안전합니다.
예:Access-Control-Allow-Origin: https://trusted-site.com
2. 브라우저 캐싱 문제
- CORS 정책 변경 시 브라우저 캐시로 인해 변경 사항이 반영되지 않을 수 있으므로, 캐시를 무효화하는 작업이 필요합니다.
3. 프리플라이트 요청(Preflight Request)
OPTIONS메서드를 사용하여 브라우저가 사전 요청(Preflight Request)을 보내는 경우가 있음.Access-Control-Allow-Methods,Access-Control-Allow-Headers를 설정해야 정상 동작.
CORS는 웹 보안 정책 중 하나로, 다른 도메인의 리소스에 접근할 때 필요한 설정입니다.
API 서버에서 CORS를 적절히 설정하면 크로스 도메인 요청을 안전하게 수행할 수 있으며, API 사용이 더 유연해질 수 있습니다.
