Angularjs JSONP não está funcionando

Eu posso estar faltando alguma coisa aqui, mas não posso fazer com que esse pedido de JSONP funcione, aqui está o código:

var url = 'http://' + server + '?callback=JSON_CALLBACK'; $http.jsonp(url) .success(function(data){ console.log('success'); }) .error(function () { console.log('error') }); 

A solicitação é acionada ok e estou recebendo a resposta (com o header Content-Type: application / json) neste formato:

  [{"id": "1", "name": "John Doe"}, {"id": "2", "name": "Lorem ipsum"}, {"id": "3", "name": "Lorem ipsum"}] 

Você pode ver algo errado? Talvez o formato que devo devolver do servidor não esteja certo? Angular triggers o callback de erro sem qualquer mensagem de erro além da que eu configurei (‘error’).

JSONP requer que você envolva seus dados em uma chamada de function JavaScript. Então, tecnicamente, você retorna um arquivo JavaScript e não um arquivo Json.

Os dados retornados do servidor devem ser semelhantes a isto:

 // the name should match the one you add to the url JSON_CALLBACK([ {"id": "1", "name": "John Doe"}, {"id": "2", "name": "Lorem ipsum"}, {"id": "3", "name": "Lorem ipsum"} ]); 

Edit : Se alguém mais se depara com problemas com JSONP angular por favor, leia esta resposta a esta pergunta , ele contém informações úteis sobre como angular lida com a function de callback real.

@TheHippo está correto os dados não devem ser apenas uma resposta json simples. Aqui está um exemplo de trabalho de uma solicitação JSONP em um terminal do youtube no AngularJS.

Algumas coisas a serem observadas neste exemplo:

  • O $ http.jsonp do Angular converte o parâmetro querystring da solicitação de callback=JSON_CALLBACK para callback=angular.callbacks._0 .
  • Ao chamar o nó de extremidade do youtube, precisei especificar para o serviço que essa é uma solicitação JSONP usando alt=json-in-script vez de alt=json na cadeia de consulta. Isso foi encontrado em sua documentação.
  • Compare os resultados desse URL com este para ver a diferença entre a resposta JSON e JSONP no seu navegador.
  • Dê uma olhada no Painel de Rede do Chrome em Ferramentas do desenvolvedor para ajudar a comparar e solucionar problemas com sua solicitação / resposta.

Eu sei que este exemplo é muito específico, mas espero que ajude!

Se os dados de resposta forem “puros” JSON, podemos manipulá-los com o $ http.get do angular.

 $http.get(url). then(function(response) { // this callback will be called asynchronously // when the response is available $scope.responseArray = response.data; }, function(response) { // called asynchronously if an error occurs // or server returns response with an error status. }); 

Consulte o exemplo em w3schools