📖 Same Origin Policy

1. SOP 정의

SOP는 "동일 출처 정책"으로 한 출처(Origin)에서 로드된 문서나 스크립트가 다른 출처의 자원과 상호작용 하지 못하도록 제한 하는 것을 말한다. 이 정책에 의해 XMLHttpRequest 객체로 특정 웹 페이지 접근할 때, 해당 웹 페이지와 동일한 출처(Same Origin)의 페이지에만 접근이 가능한 것 이다. 동일한 출처 라는 것은 프로트콜(Protocol), 호스트(Host), 포트(Port)가 같아야 함을 말한다.

👉 즉, 쉽게 설명하면 웹 페이지 스크립트는 해당 페이지와 동일한 서버에 있는 Ajax 비동기 통신을 할 수 있다.

📖 Cross-OriginResourceSharing

1. CORS 정의

서버 개발단 해결책으로 만들어진 추가 정책이 CORS(Cross-OriginResourceSharing) 이다. 이 정책의 특징은 서버에서 외부 요청을 허용할 경우 Ajax 요청이 가능해진다. 쉽게 말하면 API 서버에서 CORS를 통해 허용된 외부 도메인에서 접근할 수 있도록 만들어준다. 그리고 알아야 될 것은 CORS는 서버 단의 해결 책이지, 프론트엔드 개발 단에서 해결하는 방법이 아니다.

2. 프론트엔드(Cilent) 개발단 해결책

2-1. Chrome 브라우저 Access-Control-Allow-Origin: * 플러그인 설치

👉 Chrome 웹 브라우저에서 발생한 HTTP 요청을 가로채서 응답 헤더(Header)를 추가해주는 플러그인 이다. 서버에서 받은 요청 응답에 특정 헤더 (Access-Control-Allow-Origin: *)만 추가하면 웹 브라우저가 요청이 가능한 사이트로 인식해서 요청이 가능해지게 된다.

2-2. JSONP 방식으로 요청

👉 JSONP(JSON with Padding) 방식의 요청은 일반적인 Ajax 요청과 다르다. Ajax의 데이터 타입(DataType) 요청이 아닌, <script>로 요청되는 호출은 보안 정책이 적용 되지 않는 다는 점을 이용한 우회 방법이다.

👉 단점은 리소스 파일을 GET 메서드로 읽어오기 때문에 GET 방식의 API만 요청이 가능하다.

2-3. crossorigin.me

👉 crossorigin.me 사이트는 무료로 CORS를 이용할 수 있는 프록시 서비스를 제공한다. CORS 프록시는 개발자 다른 웹 사이트의 리소스에 접근 할 수 있게 해주는 서비스 이다.(도메인 만료)