Access-Control-Allow-Origin?

{% block extra_script %}
<script type="text/javascript">
$(function(){
    $('#app_searchbox').keypress(function(e){
        if(e.keyCode==13) {
            //e.preventDefault();
            alert('과연?');
                $.ajax({
                url: "https://store.steampowered.com/api/appdetails?appids=578080",
                type: "GET",
                dataType: "json",
                success: function(data){
                    alert(data.length);
                },
                complete : function(data){
                    alert(data.data);
                    //$('.data_area').html(data);
                },
                error: function(request,status,error){
                    alert("code = "+ request.status + " message = " + request.responseText + " error = " + error);
                }
            });
        }
    });
});
</script>
{% endblock %}

ajax 구현을 검색해서 위와 같이 했는데 안된다.

그래서 개발자 도구(F12)를 눌러서 봤더니…

“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

그리고 request headers에서 Provisional headers are shown를 띄우고 있었다.

Access-Control-Allow-Origin? 이게 뭘까?

찾아보니 서로 다른 도메인에서의 요청을 제한하는 것 같다.

검색을 통해 구글 웹스토어에서 Allow-Control-Allow-Origin를 설치했다.

ajax 이벤트 중에 error가 반환되면 표시하게 해놨는데 다음과 같이 떴다.

code = 200 message = error = SyntaxError: Unexpected end of JSON input

code는 200번으로 보아 요청은 잘 되는데 json 형식과 연관된 오류인 것 같다.

그래서 text로 바꿨더니 아무것도 안넘어오는걸 알았다. data.length가 0이다.

검색 관련 구현은 여기까지만 하고…

일단 bootstrap을 이용해서 pagination을 구현했다.

그리고 django의 paginator를 사용했다.

slug가 이미 view의 인자로 받고 있어서 page 번호를 GET으로 받았다.

# GET으로 page 번호를 받음
page = int(request.GET.get('page', 1))

# 10페이지씩 보여줌
paginator = Paginator(documents, 10)

page = paginator.page(page)