使用 AngularJS JSONP 加载外部资源时出错

Question

我真的很困惑如何使用 $http.jsonp 加载外部资源。这是我的代码：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
{{myData}}
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
var url = "https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero";
  $http.jsonp(url).then(function (response) {
      $scope.myData = response.data;
  });
});
</script>

</body>
</html>

我得到了这样的错误：

Error: [$sce:insecurl]

我的代码有什么问题？谢谢。

Answer 1

通过将您的 angular 版本从 1.6.4 更新到 1.2.6

，工作正常

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var url = "https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero";
  $http.jsonp(url).then(function (response) {
  console.log(response)
      $scope.myData = response.data;
      
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl"></div>

使用 AngularJS JSONP 加载外部资源时出错

Error while loading external resources using AngularJS JSONP

ajax

json

jsonp

angularjs