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

웹 개발을 하다 보면, 우리의 웹 사이트가 다른 사이트의 자원을 사용해야 할 때가 있습니다. 예를 들어, 다른 웹사이트에서 제공하는 이미지, 비디오 또는 데이터를 우리 사이트에서 불러와야 할 수도 있죠. 이때 중요한 개념이 바로 "Cross-Origin Resource Sharing" 또는 CORS입니다.

CORS란 무엇인가요?

CORS는 웹 페이지가 다른 도메인의 자원을 안전하게 요청할 수 있도록 하는 메커니즘입니다. 기본적으로, 웹 브라우저는 보안상의 이유로 다른 출처(origin)에서 실행되는 스크립트가 현재 페이지의 데이터에 접근하는 것을 제한합니다. 이를 '동일 출처 정책(Same-Origin Policy)'이라고 합니다. 하지만 CORS를 사용하면, 서버는 특정 출처에서 자신의 자원에 접근할 수 있는 권한을 부여할 수 있습니다.

간단한 예제로 CORS 이해하기

웹 개발에서 CORS를 이해하는 가장 좋은 방법은 예제를 통해 보는 것입니다. 아래는 간단한 코드 스니펫입니다:

// 프론트엔드 코드
fetch("https://example.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("CORS 에러:", error));

위 코드는 다른 도메인(example.com)에서 데이터를 요청합니다. 만약 example.com 서버가 CORS를 허용하지 않는다면, 브라우저는 에러를 발생시키고 데이터를 불러오지 못합니다.

서버에서 CORS 설정하기

서버에서 CORS를 허용하려면, 서버의 응답에 특정 HTTP 헤더를 포함시켜야 합니다. 예를 들어, 모든 출처에서 자원에 접근할 수 있도록 하려면 다음과 같이 설정할 수 있습니다:

Access-Control-Allow-Origin: *

하지만, 보안을 위해 특정 출처만 허용하는 것이 좋습니다. 예를 들어, 오직 https://yourwebsite.com에서만 자원에 접근하도록 설정하려면:

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

마무리

CORS는 웹 개발에서 중요한 개념 중 하나입니다. 다른 도메인의 자원을 안전하게 사용하려면, CORS를 올바르게 이해하고 설정하는 것이 중요합니다. 이 가이드가 CORS의 기본을 이해하는 데 도움이 되었기를 바랍니다. 웹 개발을 하면서 CORS와 관련된 문제를 마주치게 된다면, 이 글을 참고하여 문제를 해결해 보세요!