[서버] 교차 출처 리소스 공유 (CORS)이란 무엇인가?

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)에 대한 설명을 보겠습니다.

 

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. 교차 출처 요청의 예: https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우.

사실 아주 간단한 상황에서 발생하는 문제입니다. domain-a.com에서 자바 스크립트 등을 사용해서 다른 도메인인 domain-b.com에 속한 리소스를 요청하는 경우 발생합니다.

 

해결법은 아래와 같습니다.

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

 

저도 실제로 웹 개발을 하다 이 문제를 겪은 적이 있습니다. 커밋을 찾아보니 php에서 아래의 코드로 간단하게 해결을 했었네요.

header('Access-Control-Allow-Origin: https://domain-a.com');

리소스를 제공하는 domain-b.com쪽 코드에서 response를 보낼 때 header에 CORS 헤더를 포함해서 보내면 됩니다.

 

참 쉽죠? ㅎㅎ

 

참고

developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS)