크로스도메인(Cross Domain)

서로 다른 도메인간의 호출을 말한다

웹 사이트 개발시 주요한 이슈 중 하나인 크로스 도메인(Cross Domain)이 있다.

웹 브라우저 Javascript(JQuery)를 이용하여 AJAX 등을 통해서 다른 도메인의 서버의 URL을 호출하여 데이터를 가져오는 경우, 보안 문제를 발생시킨다.

예를 들어 우리 웹 서비스에서만 사용하기 위해 다른 서브 도메인을 가진 API 함수를 제공하는 API 서버를 구축하였는데, 다른 웹 서비스에서 이 API 서버에 접근하여 마음대로 API를 호출하여 사용한다면 문제가 된다.

Web app에서 ajax를 이용하여 REST API를 호출하면 브라우저 콘솔창에는 아래와 같은 에러가 뜬다

> XMLHttpRequest cannot load http://localhost:8080/v1/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

Javascript의 보안정책 중 하나인 Same-Origin Policy(동일 근원 정책)에 의해 원하는 회신을 받지 못하는 것을 말한다.

보안 상의 이유로, 브라우저들은 스크립트 내에 초기화되는 cross-origin HTTP요청을 제한하기 때문이다.

문제해결

이러한 문제를 해결하기 위해서는 RESTful API서버의 RESPONSE HEADER에 하나만 추가해주면 된다.
서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식이다. 요청을 받은 웹서버가 허용 할 경우 다른 도메인의 웹 페이지 스크립트에서도 자원을 주고 받을 수 있게 해준다.

Access-Control-Allow-Origin: *

//만약 특정 도매인만 허용하고 싶다면

Access-Control-Allow-Origin: http://aaa.com, http://bbb.com, …

두번째로는 자바스크립트의 document.domian을 이용하는 방법이다.
(서브도메인 간의 크로스도메인 문제해결에서만 사용될 수 있는 방법이다.)

http://aaa.com에서 http://bbb.com에 접근한다면 아래와 같이 명새해서 도메인 값을 맞춰준다.

<script type = "text/javascript">
	document.domain = 'http://bbb.com';
</script>