Angularjs JSONP no funciona

Me puede estar perdiendo algo aquí, pero no puedo hacer que esta solicitud JSONP funcione, aquí está el código:

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

La solicitud se activa correctamente y recibo la respuesta (con el encabezado Content-Type: application / json) en este formato:

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

¿Puedes ver algo mal? Tal vez el formato que debería devolver desde el servidor no es correcto? Angular dispara la callback de error sin ningún mensaje de error además del que configuré (‘error’).

JSONP requiere que envuelva sus datos en una llamada de función de JavaScript. Entonces, técnicamente, devuelve un archivo JavaScript y no un archivo Json.

Los datos devueltos por el servidor deberían ser similares a esto:

 // 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"} ]); 

Editar : Si alguien más se topa con problemas con JSONP de angular, lea también esta respuesta a esta pregunta , contiene información útil sobre cómo maneja angular la función de callback real.

@TheHippo está en lo correcto, los datos no deberían ser solo una respuesta simple. Aquí hay un ejemplo de trabajo de una solicitud JSONP contra un punto final de youtube en AngularJS.

Un par de cosas a tener en cuenta en este ejemplo:

  • Angular’s $ http.jsonp convierte el parámetro querystring de solicitud de callback=JSON_CALLBACK en callback=angular.callbacks._0 .
  • Al llamar al punto final de Youtube, necesité especificar al servicio que se trataba de una solicitud JSONP utilizando alt=json-in-script lugar de alt=json en la cadena de consulta. Esto fue encontrado en su documentación.
  • Compare los resultados de esta URL con esta para ver la diferencia entre la respuesta JSON y JSONP en su navegador.
  • Eche un vistazo al Panel de red de Chrome en Herramientas para desarrolladores para ayudar a comparar y solucionar problemas con su solicitud / respuesta.

Sé que este ejemplo es muy específico pero espero que ayude!

Si los datos de respuesta son JSON “puros”, podemos manejarlos con $ http.get de 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 el ejemplo en w3schools