[JQuery] CROS 오류, Jsonp로 해결하다

 

웹 개발을 진행하며 Ajax형식으로 비동기 데이터처리를 하다 보면

 CORS(Cross Origin Resource Sharing) 오류를 많이 접하게 된다.

이런 오류가 나는 이유는 크게 2가지 이유가 있는데

 

1. 요청하는 서버가 HTTPS 프로토콜을 사용하는데 응답하는 서버가 HTTP 프로토콜을 사용 할 때

2. 2차도메인 등 다른 도메인에서 요청할 때 등

 

예시로 현재 블로그 도메인(min-nine.tistory.com) 에서 서버 url (api.min-mine.sistory.com) 로 ajax json 요청할 때

cross-origin read blocking (corb) blocked cross-origin response 이 발생한다.

이런 오류는 아래 Jsonp 방식의 요청을 통해 간단히 해결 및 데이터를 가져올 수 있다.

<script>
        //필요 변수 선언
        var id = 'mingyu';
        var keyword = '검색값';
        
        // 요청 url - api.min-nine.tistory.com
        var url = '//api.min-nine.tistory.com/api/bookmark.php';
        var data = {
            art_id : id,
            keyword : keyword
        };
        
        //JSONP 호출
        $.ajax({
            dataType : "jsonp",
            jsonp : "callback",
            url : url,
            data : data,
            success:function(callback){
                console.log('성공'+callback);
            },// 상단 선언된 변수에 데이터를 담는다.
            complete:function(d){
                console.log(dArray);
            },
            error:function(d){ console.log("실패 "+d.responseText);}
        });
</script>