CORS란?

웹 개발을 하다 보면 CORS라는 용어를 접하게 됩니다.

CORS는 Cross-Origin Resource Sharing(교차 출처 리소스 공유)의 약자로, 다양한 출처에서 리소스를 안전하게 공유할 수 있도록 해주는 메커니즘입니다.

이 글에서는 CORS가 무엇인지, 왜 중요한지, 그리고 어떻게 설정하는지에 대해 알아보겠습니다.

 

 

1. CORS의 기본 개념

CORS는 웹 애플리케이션이 다른 출처의 리소스를 요청할 수 있도록 허용하는 보안 기능입니다.

기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르기 때문에, 한 출처에서 로드된 웹 페이지가 다른 출처의 리소스에 접근하는 것을 막습니다.

하지만 CORS를 사용하면 특정 조건을 만족하는 경우 이러한 접근을 허용할 수 있습니다.

 

여기서 말하는 출처는 아래 사진을 보면 이해하기 쉽습니다.

출처는 오리진(Origin)의 번역 표현으로 프로토콜부터 포트까지 포함하는 개념입니다.

출처를 구성하는 프로토콜, 도메인, 포트 세가지중 한 가지라도 다르면 CORS 에러가 나게 됩니다.

출처 https://docs.tosspayments.com/resources/glossary/cors

 

2. CORS의 필요성

웹 어플리케이션이 다른 출처의 데이터를 요청하는 경우 보안 문제가 발생될 수 있습니다. 

악의적인 스크립트를 사용하여 사용자의 개인 정보를 훔치거나, 사용자가 알지 못하는 사이에 악성 데이터를 주입할 수 있습니다. 

이때 CORS가 설정되지 않으면 브라우저는 보안 상의 이유로 이러한 요청을 차단합니다.

CORS는 이러한 문제를 해결하여 안전하게 리소스를 공유할 수 있도록 합니다.

 

 

3. CORS 에러 해결 방법

CORS 에러를 해결하기 위해서는 서버에서 Access-Control-Allow-Origin 헤더를 설정해서 요청을 수락할 출처를 명시적으로 지정 해 주는 것입니다.

이 헤더를 설정하면 출처가 다르더라도 리소스 요청을 허용하게 됩니다.

이때 출처를 *로 지정하면 출처에 상관없이 리소스에 접근할 수 있는 와일드카드이기 때문에 보안에 취약해 집니다.

그래서 직접 허용할 출처를 설정하는 방법이 보안상 좋습니다.