AngularJS中$ http的HTTP JSONP請求問題

Question

當我嘗試在angularJS中使用JSONP方法時出現以下錯誤。

未捕獲到的SyntaxError：意外令牌： http : //example.com/getSomeJson? format=jsonp&json_callback=angular.callbacks._0

我在這里做錯了什么，這是我的AngularJs控制器（帶有http請求）：

更新的問題詳細信息

請參見下面的代碼片段，它再現了我的問題，我評論了一些.js來說明到目前為止我已經嘗試過的內容。

 var app = angular.module('app', []); app.controller('mainController', ['$http', 'mainService', function($http, mainService){ mainCtrl = this; mainCtrl.test = "If you can see this the mainController works" var promise = mainService.getJson(); promise.then(function (data) { mainCtrl.json = data; }); }]); app.service("mainService", function ($http, $q) { var deferred = $q.defer(); /* // Method to Grab JSON that has CORs enabled: // JSON resource with CORs enabled var url = 'https://jsonplaceholder.typicode.com/posts/1'; $http({ method: 'GET', cache: true, url: url, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }). success(function(response) { //your code when success deferred.resolve(response); console.log('HTTP CORS SUCCESS!'); }). error(function(response) { //your code when fails console.log('HTTP CORS ERROR!'); }); */ /* */ // Method to Grab JSON that has CORs enabled: // JSON resources without CORs enabled var url = 'http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json' // does not work? // var url = 'http://samcroft.co.uk/json-data/sample' // this one works $http({ method: 'jsonp', url: url + '?callback=JSON_CALLBACK', }). success(function(response) { //your code when success deferred.resolve(response); console.log('JSONP SUCCESS!'); }). error(function(response) { //your code when fails console.log('JSONP ERROR!'); }); this.getJson = function () { return deferred.promise; }; });

 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js"></script> <script src="app.js"></script> </head> <body ng-controller="mainController as mainCtrl"> <p>{{mainCtrl.test}}</p> <hr /> <p>You should also see the JSON obeject below:</p> {{mainCtrl.json}} </body> </html>

原始問題的詳細信息

app.controller('testController', ['$scope', '$http', function($scope, $http){

    var url = 'http://example.com/getSomeJson';

    $http({
        method: 'JSONP',
        url: url,
        params: {
            format: 'jsonp',
            json_callback: 'JSON_CALLBACK'
        }
    }).
    success(function(data) {
        //your code when success
        $scope.data = data;
        console.log('SUCCESS!');
    }).
    error(function(status) {
        //your code when fails
        console.log('ERROR!');
    });
}]);

當我在chromes來源面板中查看json時，會看到錯誤突出顯示的位置。

知道我在做什么錯嗎？ 還是API服務的配置方式有問題？

Answer 1

干得好：-）

您嘗試使用jsonp請求的代碼看起來不錯，但是您使用的url不支持jsonp請求，這就是為什么會出錯的原因。

如果您使用$http.get嘗試相同的URL，它將正常工作。

為了支持jsonp調用，響應應使用JSON_CALLBACK ()包裝，如下所示

JSON_CALLBACK ({ /* JSON */ })

因此，我將其更改為有效的jsonp url並成功了！

https://angularjs.org/greet.php?callback=JSON_CALLBACK

您可以在瀏覽器中嘗試此url並查看響應，以及如何使用JSON_CALLBACK ()包裝它。

但是，如果您嘗試使用以下網址，則可以看到json而不進行任何包裝。

http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json?callback=JSON_CALLBACK

這就是確定api是否支持jsonp的區別。

另外，我使用與另一個SO問題答案相同的語法更改了以下service ，

https://stackoverflow.com/a/41030976/7055233

工作片段 ：

 var app = angular.module('app', []); app.controller('mainController', ['$http', 'mainService', function($http, mainService){ mainCtrl = this; mainCtrl.test = "If you can see this the mainController works" var promise = mainService.getJson(); promise.then(function (data) { mainCtrl.json = data; }); }]); app.service("mainService", function ($http, $q) { var deferred = $q.defer(); var url = 'https://angularjs.org/greet.php'; //var url = 'http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json'; /* // Method to Grab JSON that has CORs enabled: // JSON resource with CORs enabled var url = 'https://jsonplaceholder.typicode.com/posts/1'; $http({ method: 'GET', cache: true, url: url, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }). success(function(response) { //your code when success deferred.resolve(response); console.log('HTTP CORS SUCCESS!'); }). error(function(response) { //your code when fails console.log('HTTP CORS ERROR!'); }); */ /* */ // Method to Grab JSON that has CORs enabled: // JSON resource without CORs enabled function getJson() { // $http.jsonp(url + "?callback=JSON_CALLBACK"). // this does not work either $http.jsonp(url + '?callback=JSON_CALLBACK'). then(function(response) { //your code when success deferred.resolve(response); console.log('JSONP SUCCESS!'); }, function(response) { //your code when fails console.log('JSONP ERROR!'); deferred.reject(response); }); return deferred.promise; } this.getJson = getJson; });

 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js"></script> <!--<script src="app.js"></script>--> </head> <body ng-controller="mainController as mainCtrl"> <p>{{mainCtrl.test}}</p> <hr /> <p>You should also see the JSON obeject below:</p> {{mainCtrl.json}} </body> </html>

Answer 2

JSONP回調必須由`jsonpCallbackParam`指定

突破性變化

您不能再在JSONP請求中使用JSON_CALLBACK占位符。 相反，您必須提供查詢參數的名稱，該參數將通過config對象的jsonpCallbackParam屬性傳遞回調，或通過$http.defaults.jsonpCallbackParam屬性在應用程序范圍內"callback" ，默認情況下為"callback" 。

-添加到AngularJS v1.6.0-rc.2

更新

OP的示例代碼不起作用，因為http://run.plnkr.co API不支持JSONP。

JSONP僅在某些帶有ACCESS-CONTROL標頭的API的網站上可用。

有關更多信息，請參見JSONP揭秘

AngularJS中$ http的HTTP JSONP請求問題

問題描述

更新的問題詳細信息

原始問題的詳細信息

2 個解決方案

解決方案1
1 已采納 2016-12-08 23:03:59

解決方案2
0 2016-12-07 19:26:15

JSONP回調必須由`jsonpCallbackParam`指定

更新

AngularJS中$ http的HTTP JSONP請求問題

問題描述

更新的問題詳細信息

原始問題的詳細信息

2 個解決方案

解決方案1 1 已采納 2016-12-08 23:03:59

解決方案2 0 2016-12-07 19:26:15

JSONP回調必須由jsonpCallbackParam指定

更新

解決方案1
1 已采納 2016-12-08 23:03:59

解決方案2
0 2016-12-07 19:26:15

JSONP回調必須由`jsonpCallbackParam`指定