angularjs + jsonp 返回失败

Question

我正在尝试构建一个示例应用程序，该应用程序将使用 JSONP 抓取数据进行填充。我把它放在http://angular.onagrag.com/ 并点击注册。

我要加载的文件位于http://api.onagrag.com/data.json

当我访问http://angular.onagrag.com/register 时，它会触发对象的错误方法（并且会触发两次）

这是我正在使用的 Angular 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 请求参数并使用一个对请求方法名称进行方法调用的文件进行响应。当您使用 angular $http.jsonp 方法时，angular 会将回调请求参数更改为正确的 angular 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 由 angular 指定。

JSONP 存在一些潜在的安全漏洞 - 您可以在您的 Angular 应用程序here 中阅读更多关于它们以及如何防止它们的信息。