CORS 이해하기: 웹 개발자를 위한 완벽한 가이드 🌐

웹 개발을 하다 보면, 다른 출처(도메인, 프로토콜, 포트)에서 리소스를 불러오려 할 때 보안 문제에 부딪히는 경우가 많습니다. 이때 CORS, 즉 Cross-Origin Resource Sharing의 개념이 중요해집니다. CORS는 웹 페이지가 다른 출처의 리소스를 안전하게 요청할 수 있도록 하는 메커니즘입니다. 이 가이드에서는 CORS가 무엇인지, 왜 중요한지, 그리고 기본적인 사용 방법에 대해 알아보겠습니다.

CORS란 무엇인가요?

CORS는 웹 페이지가 다른 도메인의 리소스를 요청할 때 발생할 수 있는 보안 문제를 해결하기 위한 방법입니다. 기본적으로 브라우저는 같은 출처 정책(Same-Origin Policy)을 따릅니다. 이 정책은 웹 페이지가 다른 출처의 리소스를 요청할 때 제한을 두어 보안을 강화합니다. 하지만, CORS를 사용하면 서버가 특정 출처에서의 요청을 허용한다는 '헤더(Header)'를 포함시켜, 안전하게 리소스를 공유할 수 있게 됩니다.

CORS는 왜 중요한가요?

웹 애플리케이션을 개발할 때, API나 외부 리소스를 활용하는 경우가 많습니다. 예를 들어, 다른 도메인에서 호스팅되는 이미지나 데이터를 불러와야 할 수도 있습니다. 이때 CORS 정책이 없다면, 보안상의 이유로 리소스를 불러오는 것이 불가능할 수 있습니다. 따라서, CORS는 웹 개발에서 리소스 공유를 가능하게 하는 중요한 역할을 합니다.

기본적인 CORS 사용 방법

서버에서 특정 출처의 요청을 허용하려면, 응답 헤더에 Access-Control-Allow-Origin을 포함시켜야 합니다. 예를 들어, 모든 출처에서의 요청을 허용하고 싶다면 다음과 같이 설정할 수 있습니다.

Access-Control-Allow-Origin: *

하지만, 보안상의 이유로 모든 출처를 허용하는 것은 권장되지 않습니다. 특정 출처만 허용하고 싶다면, 해당 출처의 URL을 명시해야 합니다.

Access-Control-Allow-Origin: https://example.com

또한, 서버가 요청을 수락하기 전에 브라우저가 먼저 '사전 요청(Preflight Request)'을 보내는 경우도 있습니다. 이는 OPTIONS 메소드를 사용하여 서버에게 실제 요청을 보내기 전에 허용되는 메소드와 헤더를 확인하는 과정입니다.

실습 예제

간단한 예로, 자바스크립트에서 fetch 함수를 사용하여 다른 출처의 리소스를 요청하는 방법을 살펴보겠습니다.

fetch('https://api.example.com/data', {
  method: 'GET', // HTTP 요청 메소드
  headers: {
    'Content-Type': 'application/json', // 요청의 컨텐츠 타입
  }
})
.then(response => response.json()) // 응답을 JSON으로 변환
.then(data => console.log(data)) // 데이터 처리
.catch(error => console.error('Error:', error)); // 에러 처리

이 코드는 https://api.example.com/data에서 데이터를 요청합니다. 서버가 CORS를 올바르게 설정했다면, 이 요청은 성공적으로 처리될 것입니다.

웹 개발을 하면서 CORS는 빼놓을 수 없는 중요한 개념입니다. 이 가이드가 CORS를 이해하고, 웹 애플리케이션에서 리소스를 안전하게 요청하는 데 도움이 되길 바랍니다.