휴... 이 짓을 하려고 삽삽삽~ 솨~ 솨삽삽삽~~ 질 했네..
하려고 했던 내용은 아래 그림중 위의 내용!!
요약하자면.. 크로스도메인간의 웹서비스를 호출 하기 위해서는 일반적인 jquery.ajax호출 방법으로는 안되고 jsonp를 이용해야 한다.
Cross Domain(크로스 도메인)
자바스크립트(Javascript) 보안 정책 중에 하나인 동일 근원 정책(Same-Origin Policy) 정책에 걸리는 부분이
바로 크로스 도메인을 할때 일어난다.
다시 말하면 서로 다른 도메인에서 자바스크립트로 접근하려 했을 때 혹은 다른 서버에 Ajax통신의 결과를 받을 때
보안상 접근을 거부한다.
자바스크립트는 같은 도메인 내에서만 작동하는 것을 원칙으로 한다. 이게 동일 근원 정책(Same-Origin Policy) 정책
다시 말해 샌드박스(SandBox) 정책이다. ( 웬지 모래가지고 놀면 그 안에서만 놀아야 혼나지 않을 것 같지 않나요?)
위의 주소에서 굵은 글씨가 도메인 영역이다.
자바스크립트는 자신을 로드한 도메인을 기준으로 자신의 도메인을 정한다.
그렇기 때문에 도메인이 다르면 자바스크립트 제어 통제권을 가질수가 없게 된다.
하지만 대형 사이트를 구축하다보면 이 문제를 극복해야 될 때가 있다.
이 부분에 대해서 알고 있는 팁들을 공유한다.
첫 번째 방법 서브 도메인이 동일한 부분이 있다면 이 방법을 추천한다.
이 두 주소를 보면 공통인 부분이 존재한다.
바로 이 부분을 이용해서 크로스 도메인을 해결 하려면
document.domain = "naver.com";
이렇게 스크립트에 넣어주면 된다.
단 subdomain 주소만 된다.
두 번째 방법
JSONP(JSON with Padding)를 사용한다.
간단히 원리를 설명하면
우선 동적으로 script 태그를 생성하고 src부분에 호출할 서버 주소와 파라미터를 붙여서 넣고 document.body에 DOM메소드를 사용하여 append한다. 그렇게 하면 서버에 리퀘스트(요청)를 보내고 되고 서버는 리스판스(응답)를 하게 된다.
그리고 그 응답은 아래와 같은 문자열을 출력한다.
callback_function_name({name:"test"})
위와 같이 굵은 글씨가 바로 서버로 요청한 주소에 붙은 파라미터 값이다.
이것은 함수 이름으로 로드되면서 실행되게 한다. 이 함수가 넘겨받은 인자를 객체로 생성하고 지정된 콜백함수에 생성된 객체를 파라미터로 호출한다. 물론 마지막에는 붙인 script 태그는 제거한다.
단 get 메소드 밖에 사용할 수가 없다. 주소로 요청을 보내기 때문이다.
이는 파라미터가 많으면 보낼수가 없다는 얘기이다.
세 번째 방법
Flash를 이용한다. 단 서버에 xml 설정 파일이 추가되어지고 클라이언트 단에서 flash파일이 필요하다.
Flash를 사용하면 get/post 모든 메소드 방법을 사용 할 수 있고 크로스 도메인 문제가 생기지 않는다.
하지만 말그대로 Flash를 사용해야 된다.
Flash가 동작하지 않은 환경에서는 동작을 하지 못한다.
이 외에도 여러가지 방법이 존재 할 수 있다.
하지만 가능한 동일한 도메인이 존재하는 환경에서는 document.domain이 좋은 해결책일 것이고
get으로만 보내도 괜찮은 환경이라면 JSONP를 추천한다.
어쨌거나 크로스 도메인은 더 이상 문제가 되지 않는다.
정 그래도 문제가 생긴다면 서버에게 일 좀 시키면 된다. ㅋㅋ
댓글