jQuery Cross domain - 크로스 도메인 문제 해결하기

 크로스도메인을 통한 데이터 전송은 자주 있는 방식인대요. jQuery 플러그인으로 GET과 Yahoo API를 이용한 플러그인이 있기는 하지만 간단한게 jQuery 의 기능만으로 구현하는 방법을 소개드리겠습니다.

우선 jQuery 의 코드 입니다.

$.ajax({
	    crossDomain:true,
	    type: "POST",
	    url: "http://api.test.com/testapi/",
	    data: {url:document.URL},
	    success: function(data){	
			log(data);
	    }
	
	});

 위의 코드에서 주요하게 보실점은 바로 crossDomain:true 부분입니다. jQuery 에서 crossDomain 을 true로 설정하면서 크로스 도메인을 사용한다는 설정을 하게됩니다. 하지만 jQuery 설정만으로도 작동되면 좋겠지만 그렇지 못합니다.

위의 설정만으로 사용할경우 아래와 같은 에러를 보실수 있는대요. 서버 사이드에서 크로스 도메인을 허용하지 않아서 발생하는 에러 입니다.

XMLHttpRequest cannot load http://api.비밀.kr/comment/. Origin http://t.비밀.kr is not allowed by Access-Control-Allow-Origin.

따라서 서버측 페이지에도 아래와 같은 코드를 넣어 주도록합니다.

PHP기준

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

 해더 부분에 Access 허용을 * 로 정의해줌으로서 크로스 도메인 이라도 요청을 받게 됩니다.

ps. SESSION 데이터는 넘어가지 못하니 참고하시기 바랍니다.

 * SESSION 정보는 다른 방법으로 처리 합니다.