angularjs + jsonp возвращает сбой

Question

Я пытаюсь создать пример приложения, которое будет захватывать данные, используя JSONP для заполнения. У меня он выставлен на http://angular.onagrag.com/ и нажав на регистрацию.

Файл Я пытаюсь загрузить это в http://api.onagrag.com/data.json

Когда доступ http://angular.onagrag.com/register он запускает метод ошибки объекта (и он стреляет дважды)

здесь угловую JS файл, который я используя (он также находится по адресу http://angular.onagrag.com/js/test.js

Он работает нормально, если я использую локальные данные (например, используйте метод $ http.get вместо метода $ http.jsonp), но не будет работать с jsonp. !

var App = angular.module('popdust', ['ngResource']).config(['$locationProvider', function($location) { 
    $location.html5Mode(true).hashPrefix('!') 
}]); 

App.config(['$routeProvider', function($routes) { 

    $routes.when('/register',{ 
    templateUrl : '/templates/register.html', 
    controller : RegisterCtrl 
    }); 

    $routes.when('/',{ 
    templateUrl : '/templates/home.html', 
    controller : HomeCtrl 
    }); 



}]); 
var HomeCtrl = function($scope, $http, $location) { 
    $scope.title = 'We are home'; 
    $scope.obj = ['one', 'two','three']; 
}; 

var RegisterCtrl = function($scope, $http, $location) { 
    $scope.title = 'Register!'; 
    $scope.handleData = function(data){ 
     $scope.fields = data; 
    } 
    $scope.fetchjsonp = function(){ 
    $http.jsonp('http://api.onagrag.com/data.json?callback=JSON_CALLBACK').success(function(data){ 
      alert("success");   
     }).error(function(data, status, headers, config) { 
      alert("YOU FAIL"); 
     }); 
    } 

    $scope.fetch = function(){ 
    $http.get('js/data.json').success($scope.handleData); 
    } 

    $scope.fetchjsonp(); 
}; 

HomeCtrl.$inject = ['$scope','$http','$location']; 
RegisterCtrl.$inject = ['$scope','$http','$location']; 

Answer 1

Похоже, проблема связана с вашим ресурсом. Когда я проверяю http://api.onagrag.com/data.json?callback=JSON_CALLBACK я получаю следующий ответ:

[{ 
    "id" : "first_name", 
    "title" : "First Name", 
    "description" : "The name your parents gave you" 
    },{ 
    "id" : "last_name", 
    "title" : "Last Name", 
    "description" : "In Spanish, it's called your apellido (or something like that)" 
}] 

Это не является допустимым JSONP response. С параметром запроса callback=nameOfCallbackFn ответ должен быть одним вызовом функции для функции с именем nameOfCallbackFn (с результатом, поскольку это только параметр).

Обновление: сервер, обслуживающий JSONP, должен прочитать параметр запроса callback и ответить файлом, который вызывает вызов метода имени метода запроса. Когда вы используете угловой метод $http.jsonp, угловой изменит параметр запроса обратного вызова на правильное имя метода обратного вызова углового jsonp (atm, похоже, они называются angular.callback._0, ..._1 и т. Д.). Вы не можете служить статическому файлу, так как это имя может меняться от одного запроса к другому. Это было непонятно в моем первоначальном ответе.

Что-то вроде этого:

nameOfCallbackFn ([{ 
    "id" : "first_name", 
    "title" : "First Name", 
    "description" : "The name your parents gave you" 
    },{ 
    "id" : "last_name", 
    "title" : "Last Name", 
    "description" : "In Spanish, it's called your apellido (or something like that)" 
}]); 

Где nameOfCallbackFn задается угловой.

У JSONP есть некоторые потенциальные уязвимости безопасности - вы можете узнать больше о них и как их предотвратить в своем угловом приложении here.