웹 개발에서 CORS(Cross-Origin Resource Sharing) 에러는 흔히 마주치는 문제입니다. 이 에러는 주로 다른 출처의 리소스를 요청할 때 발생하는데, 이를 이해하고 해결하는 방법은 모든 웹 개발자에게 필수적입니다.
CORS 에러의 원인
CORS란 무엇인가?
CORS는 교차 출처 리소스 공유를 의미합니다. 이는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 때, 웹 브라우저가 보안상의 이유로 차단하는 정책을 우회하기 위한 방법입니다. 기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르므로, 다른 출처에 있는 리소스에 접근하려 할 때 문제가 발생합니다.
동일 출처 정책(SOP)
동일 출처 정책은 보안상의 이유로 웹 페이지가 로드된 출처와 동일한 출처에서만 리소스를 요청할 수 있도록 제한합니다. 여기서 출처란 프로토콜, 호스트, 포트를 의미하며, 이 세 가지가 모두 동일해야 동일 출처로 인정됩니다. 만약 하나라도 다르면 CORS 에러가 발생하게 됩니다.
요청 방식에 따른 CORS
웹 자원 요청
- 태그:
<img>,<link>,<script>태그는 기본적으로 CORS 정책을 지원합니다. 즉, 다른 출처의 리소스를 요청할 수 있습니다. - AJAX 요청:
XMLHttpRequest나Fetch API를 사용하는 자바스크립트 요청은 기본적으로 동일 출처 정책을 따릅니다. 이 경우, 다른 출처의 리소스를 요청하면 CORS 에러가 발생합니다.
예제 코드로 이해하기
아래의 코드는 두 가지 방식으로 동일한 이미지를 요청하는 예제입니다.
<body>
<img src="https://third-party-test.glitch.me/check.svg" alt="이미지">
<script>
fetch('https://third-party-test.glitch.me/check.svg')
.then(response => response.blob())
.then(imgBlob => {
const imageObjectURL = URL.createObjectURL(imgBlob);
const img = document.createElement('img');
img.src = imageObjectURL;
document.body.append(img);
});
</script>
</body>
위 코드에서 <img> 태그를 사용한 경우에는 정상적으로 이미지가 나타나지만, fetch를 통해 요청했을 때는 CORS 에러가 발생합니다.
CORS 에러 메시지 해석
CORS 에러 메시지는 일반적으로 다음과 같은 형식을 띱니다:
Access to fetch at 'https://myhomepage.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
이 메시지는 요청한 리소스에 Access-Control-Allow-Origin 헤더가 없다는 것을 의미하며, 이는 서버에서 CORS 정책을 설정하지 않았기 때문입니다.
CORS 해결 방법
서버 측 조정
CORS 에러를 해결하기 위해서는 서버가 클라이언트의 요청에 대해 Access-Control-Allow-Origin 헤더를 설정해야 합니다. 이 헤더는 어떤 출처가 리소스에 접근할 수 있는지를 명시합니다.
예비 요청(Preflight Request)
CORS의 동작 과정에서 예비 요청이 발생합니다. 이 요청은 OPTIONS 메소드를 사용하여 서버와의 통신이 안전한지를 확인합니다. 서버는 이 요청에 대한 응답으로 허용되는 메소드와 출처를 명시하게 됩니다.
자주 묻는 질문
CORS 에러를 어떻게 해결할 수 있나요?
서버에서 Access-Control-Allow-Origin 헤더를 설정하여 특정 출처에서의 요청을 허용하면 CORS 에러를 해결할 수 있습니다.
모든 출처를 허용하는 것이 안전한가요?
모든 출처를 허용하는 것은 보안상 위험할 수 있습니다. 특정 출처만 허용하는 것이 더 안전합니다.
CORS가 없으면 어떤 문제가 발생하나요?
CORS가 없으면 웹 애플리케이션 간에 데이터 공유가 원활하지 않게 되며, 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
예비 요청(Preflight)이란 무엇인가요?
예비 요청은 CORS 정책을 따르기 위해 브라우저가 실제 요청을 보내기 전에 서버와의 통신이 안전한지를 확인하기 위해 보내는 요청입니다.
CORS 설정을 어떻게 확인하나요?
개발자 도구의 네트워크 탭을 통해 요청과 응답의 헤더 정보를 확인하여 CORS 설정을 점검할 수 있습니다.
CORS에 대한 이해는 웹 개발에서 필수적이며, 이를 통해 더 안전하고 유연한 웹 애플리케이션을 개발할 수 있습니다.