[JavaScript] Cross Domain?

다른 서버에 저장되어 있는 xml 파일을 jquery를 통해 가지고 와서 parsing을 하려던 찰나..

계속 jquery에서 xml 가져오는 것이 실패 하는 것이었다.

왜왜왜!!

error를 찍어보니 xml에 대한 권한이 없다고 찍혀 있었다.

해당 에러를 이용하여 열심히 구글링 한 결과 아래의 fact를 발견하였다.

자바스크립트 보안 정책 중 동일근원정책(Same-Origin Policy)이 존재하는데, 어렵게 설명할 것 없이 단순하게 서로 다른 도메인 상의 데이터는 접근이 불가능 하다는 것이다. 일명 Cross Domain 문제.

찾아보면 여러가지 해결 방법이 나타나 있다.

1. 동일 서버의 url을 호출한 후 해당 url에서 다른 도메인의 url을 redirect 하는 방법. (괜찮은 방법)

2. JSONP를 이용하는 방법. (같은 JSON 포멧인지 알았는데, 추가로 작업이 필요하여 포기)

3. 그리고 HTTP access control(CORS)이라고 해서, HTTP 헤더 상에 Cross Domain을 허용한다라는 정의를 기입하는 방법.(가장 간단)

필자는 개인적으로 3번의 방법을 선택했다.

사용 방법은 정말로 간단하다.

http 헤더 보낼 때, 'Access-Control-Allow-Origin:*' 라는 값을 추가로 기입해서 보내주면 된다.

<?php header('Access-Control-Allow-Origin:*');

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";

echo "<data><node1>1</node1><node2>2</node2><node3>3</node3>"</data>";

?>

CORS 참고 사이트