Jquery의 ajax() 사용시 url type 호출방법으로 GET, POST 방법 등을 쓰게 되는데
다음 소스와 같이 직접적으로 url에 넣어 통신을 할 경우 access-control-allow-origin 크로스 도메인 이슈가 발생하게 됩니다.
1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ var seoul = ['http://www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1159063000'] $.ajax({ url : seoul[i], type : "GET", success : function(xml){ } }); }); | cs |
해결방법으로는 클라이언트에서 처리하는 방법과 서버에서 처리하는 방법이 있는데
클라이언트에서 처리하는 방법을 사용할 시 서비스를 사용하는 사용자에게 플러그인을 모두 깔아서 보게하거나 설정해야 할 일이 생겨
서버쪽에서 처리해주어야 합니다.
제가 해결한 방법으로는 controller를 만들어 해결하는 것입니다.
저는 get방식으로 컨트롤러를 태워 기상청 RSS 데이터 XML을 파싱해 가져오려고 합니다.
servlet을 통해 다음과 같이 어노테이션을 주어 컨트롤러로 이동시킵니다.
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function(){ $.ajax({ url : 'get.do', type : "GET", success : function(xml){ } }); }); | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @WebServlet("/get.do") public class Test1 extends HttpServlet { private static final long serialVersionUID = 1L; public Test1() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String addr = "http://www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1159063000"; URL url = new URL(addr); InputStream in = url.openStream(); CachedOutputStream bos = new CachedOutputStream(); IOUtils.copy(in, bos); in.close(); bos.close(); String data = bos.getOut().toString(); out.println(data); } } | cs |
다음과 같이 작성하여
controller를 통해 데이터를 받게되면 클라이언트에서 크로스 도메인 이슈가 나타나지 않습니다.
'전체 > JS & Jquery' 카테고리의 다른 글
자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기 (2) | 2018.08.16 |
---|---|
Email Validation Check 정규표현식 이용하기 (0) | 2018.04.04 |
문자열 3자리마다 콤마찍기, 특정문자 없애기, 마지막 문자 자르는방법 (0) | 2018.04.04 |
jquery 사용한 클래스 변경 추가 제거 방법 (0) | 2017.10.18 |
Jquery each function 사용하기 (0) | 2017.08.29 |