Deezer Api는 어떻게 사용합니까?

Question

저는 deezer API를 사용하여 아티스트를 검색하고 Jquery를 사용하여 이미지의 이름과 이미지를 표시하려고합니다. 내 코드는 다음과 같습니다.

$.getJSON('http://api.deezer.com/search/artists?q='+q+'', 
    function(data) { 
     $("#artists").empty(); 
     $.each(data, function(i,item){ 

var y=item.picture; 

var z=x+y; 

     $("#artists").append("<div id='card_artist'><div id='cardimg' style='background-image: url("+ z +");'></div><div id='artistname' class='jtextfill'><span>" + item.name + "<span></div></div>"); 
    }); 
}); 

하지만 작동하지 않습니다. 코드는 잘 보이지만, 내가 어떻게 해결에 대한 실마리 여부가이 오류 메시지를 던지고 계속 :

XMLHttpRequest cannot load http://api.deezer.com/search/artists?q=whatever. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

가 어떻게 작동하는 얻는가를?

Answer 1

브라우저가 요청을 차단했기 때문에 오류가 발생합니다. 자신의 사이트 또는 localhost에서 javascript로 실행하기 때문에 다른 URL (Deezer URL)을 호출하여 교차 사이트 요청을 수행합니다. 이 문제를 해결하는 방법은 여러 가지가 있습니다.

1. 은 JSONP와 다음 '해킹'을 시도해보십시오

   // Using YQL and JSONP 
   $.ajax({ 
       url: "http://api.deezer.com/search/artists?q="+q, 
   
       // the name of the callback parameter, as specified by the YQL service 
       jsonp: "callback", 
   
       // tell jQuery we're expecting JSONP 
       dataType: "jsonp", 
   
       // tell YQL what we want and that we want JSON 
       data: { 
        format: "json" 
       }, 
   
       // work with the response 
       success: function(response) { 
        $("#artists").empty(); 
        $.each(data, function(i,item){ 
   
         var y=item.picture; 
   
         var z=x+y; 
   
         $("#artists").append("<div id='card_artist'><div id='cardimg' style='background-image: url("+ z +");'></div><div id='artistname' class='jtextfill'><span>" + item.name + "<span></div></div>"); 
   
        } 
   }); 
   

   출처 : https://learn.jquery.com/ajax/working-with-jsonp/

또는 2. 경로를 자신의 서버를 통해 요청. php와 같은 서버 측 언어를 사용하면 Deezer Api에 요청을하고 jQuery를 사용하여 해당 PHP 페이지를 호출 할 수 있습니다.