전체/JS & Jquery
access-control-allow-origin 크로스 도메인 이슈 해결방법
effortDev
2017. 5. 12. 09:26
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를 통해 데이터를 받게되면 클라이언트에서 크로스 도메인 이슈가 나타나지 않습니다.