ajax 크로스도메인, CORS policy 해결방법 ( cross Domain, cors)

CORS 는 항상 우리를 힘들게 한다. 해결방법은 없을까??

 

$.ajax() 같은 ajax 관련 함수를 호출할 때 타겟이 되는 URL이 클라이언트와 다른 도메인이면 호출이 안 된다.

 

http://ynkim.com 에서 ajax로 http://shlee.com 라는 API를 호출할 수는 없다는 말이다.

 

자바스크립트(Javascript) 보안 정책 중에 하나인 동일 근원 정책(Same-Origin Policy) 정책에 걸리게 되기 때문이다.

 

이를 업계에서는 보통 CORS라고 많이들 표현한다. 

 

그래서 몇가지 해결책에 대해 포스팅 한다.

 

그리고, ajax 사용방법과 샘플코드와 자세히 소개한내용이 있으니, 아래 링크를 통해 함께 확인해 보시기 바랍니다.

ajax-사용방법 예제 참조 정보 (클릭)

 

 

CORS 해결책에 대한 정리

 

1. Proxy servlet을 만들어서 호출 하는방법 -개인적으로 추천하는 방법.

 

아래 내용을 통해서 더 자세히 알아보시기 바랍니다.

 

 

 

http://ynkim.com/aaa.jsp  ->  http://shlee.com/bbb.jsp aaa.jsp 에서 bbb.jsp에 ajax 요청을 보낼경우 이런경우는 도메인이 틀리기 때문에 document.domain 이 안먹는다. aaa.jsp 에서는 proxy server를 하나 띄운다. 이때 proxy server 는 aaa.jsp 서버에 있어야 한다. proxy server  서버는 자바 HttpURLConnection 으로 bbb.jsp 호출해서 결과값을 aaa.jsp로 전달해준다. 구글에다가 ajax proxy 개발언어 로 검색하면 예제 소스가 많이 나온다.  *요청  (     같은서버                )  ->    (응답서버)    ( aaa.jsp -> proxy server) ->    bbb.jsp

 

 

2. WAS Server reponse header 설정에서 CORS를 열어 버린다. ( Header 설정  )

 -  누구나 호출가능 하므로 보안이나 성능 이슈가 있을수 있음.

 

JAVA 기준 요청 받는 서버 & 페이지 에서 아래와 같이 해더 설정을 해준다. ​ response.addHeader("Access-Control-Allow-Origin", "*");   response.setHeader("Access-Control-Allow-Headers", "origin, x-requested-with, content-type, accept");

 

3. jsonp 를 이용하는 방법

 

jQuery 버전 1.2부터는 JSONP 호출에 대한 네이티브 지원이 제공되고 있다.  JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 있으며 JSONP  콜백은 url?callback=?라는 구문을 사용한다. 근데 얘는 호출방식 자체가 get방식이라 parameter 양이 많으면,  문제가 되므로 별로 비추다. 넘기는 파라미터값이 크기가 작다면 써볼만하겠다. jQuery.getJSON(url+"&callback=?", function(data) {     alert("Symbol: " + data.symbol + ", Price: " + data.price); });

 

 

 

4. document.domain 방법 - 비추

 

http://aaa.naver.com/aaa.jsp  ->  http://bbb.naver.com/bbb.jsp aaa.jsp 에서 bbb.jsp에 ajax 요청을 보낼 경우 이방법은 서브도메인만 다를때 사용할수 있다. aaa.jsp  document.domain = "naver.com"; bbb.jsp document.domain = "naver.com"; 이렇게 스크립트에 넣어 주면 된다.

 

 

 

※ jqeury ajax에 관련된 아래 글을 같이 확인해 보시기 바랍니다.

 

* jqeury ajax 사용방법 예제 ( 쉽게 잘 설명 )

https://www.appletong.com/entry/jquery-ajax-사용방법-예제

jquery ajax 사용방법 예제

 

* iframe 내의 세션유지가 안될 경우

 

https://www.appletong.com/entry/크롬-same-site

다른 도메인 내 iframe의 세션이 유지가 안될때 ( same site )