📌 CORS 에러란?
CORS 에러에서 CORS는Cross - Origin Resource Sharing 의 약자로, 교차 출처 리소스 공유 에러라고도 한다.
이 에러는 서버가 아닌 브라우저에서 발생하는 에러로서, XMLHtttpRequest, fetch등의 자바스크립트 메서드 를 통해 브라우저에서 현재 브라우저의 주소와는 다른 주소를 가진 서버로 요청을 보낼 때, 즉 요청의 출처가 다를 때 발생한다.
🔍 교차 출처(Cross-Origin)과 동일 출처(Same-Origin)
그렇다면 여기서 말하는 출처(Origin)이란 무엇이고, 교차 출처와 동일 출처는 무얼 말하는 것일까?
우리는 어떤 사이트에 접속할 때 URL을 입력하게 되며, 이 URL은 다음과 같이 여러 가지 구성요소로 이루어져 있다.
여기서 Protocol, Host, Port까지를 출처(Origin)이라고 한다.
따라서 동일 출처란 요청하는 곳의 출처와 요청받는 곳의 출처가 같은 것을 의미하고, 교차 출처란 둘이 다른 것을 의미한다.
우선 CORS 에러를 이해하기 위해 SOP에 대해 먼저 알아보자.
📌 SOP란?
SOP는 Same Origin Policy의 약자로서, 이 SOP를 따른다는 것은 같은 출처에서만 자원을 공유할 수 있는 환경이라는 것을 의미한다.
SOP를 따르면, 다른 출처의 자원이 공유되는 경우, 즉 교차 출처인 경우에는 이를 차단하는 것이고, CORS 에러가 발생하게 되는 것이다.
🔍 교차 출처일 경우 왜 접근을 차단하는가?
사실 출처가 다른 두 어플리케이션이 자유로이 소통할 수 있는 환경은 꽤 위험한 환경이다. 만일 제약이 없다면, 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 방법을 이용해서 우리가 만든 어플리케이션에서 해커가 심어놓은 코드가 실행하여 개인 정보를 가로챌 수 있다.
해당 방법을 간단히 도식화하자면 다음과 같다.
따라서 이런 악의적인 접근을 방지하기 위해, 교차 출처인 경우 접근을 차단하는 것이다.
여기서 접근을 차단한다는 것은, 브라우저가 서버에게 보내는 요청을 차단하는 것이 아니라, 서버에서 브라우저로 오는 응답을 차단하는 것이다.
📌 CORS 에러 해결 방법
1. 서버의 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재하기
해당 방법은 내가 데이터를 요청하는 서버가 내가 운영하는 서버일 경우에만 가능하다.
2. Chrome 확장 프로그램 이용하기
특정 앱을 개발할 때는 적절하지 않은 방법이다.
3. 프록시 사이트 이용하기
프록시란 클라이언트와 서버 사이의 중계 대리점을 말한다. 모든 출처를 허용한 서버 대리점을 통해 요청을 하여 CORS 에러를 해결하는 방법이다. 다만 해당 방법 또한 프록시 서버 악용 사례로 인해 api 요청 횟수에 제한이 있다.
4. 직접 프록시 서버 구축하기
Express.js 등을 사용해 직접 프록시 서버를 구축하는 방법이다. 개발 시에 적합한 방법이다.
출처
