错误：$ http：badjsonp

Question

我正在尝试从外部API获取详细信息，但却无法获得JSON响应。

这是我的服务代码：

angular.module('app').factory('appService', appService);
appService.$inject = ['$http','$sce'];
function appService($http, $sce) {
            return {
                    getData: getData
               };

    function getData() {
        //Rest Headers
        var URL = "https://www.westelm.com/services/catalog/v4/category/shop/new/all-new/index.json?callback=JSON_CALLBACK";
        var requestHeaders = {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            };


    var trustedUrl = $sce.trustAsResourceUrl(URL);

    return $http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'})
    .then(function successCallback(response) {
                        console.log("succes");
                        return response.data;
                }, function errorCallback(response) {
                        console.log("error");
                        console.log(response);
                        return response.data;
                }
    );

    }
}

我收到以下错误消息：

错误：[$ http：badjsonp] http://errors.angularjs.org/1.6.9/$http/badjsonp?p0=https%3A%2F%2Fwww.westelm.com%2Fservices%2Fcatalog%2Fv4%2Fcategory%2Fshop%2Fnew%2Fall-new%2Findex.json%3Fcallback%3DJSON_CALLBACK

但API运行正常。如何点击此API以获取数据？

根据给定答案更新了代码：

angular.module('app').factory('appService', appService);
appService.$inject = ['$http','$sce'];
function appService($http, $sce) {
    //Binding   
        return {
                    getData: getData
               };

    function jsonp_callback(data) {
        console.log("callback");
      console.log(data);
      return true;
    }

    function getData() {
        //Rest Headers
        var URL = "https://www.westelm.com/services/catalog/v4/category/shop/new/all-new/index.json";
        var requestHeaders = {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            };


    $sce.trustAsResourceUrl(URL);


    return $http.jsonp(URL, {
        jsonpCallbackParam: 'jsonp_callback'
      })
      .then(function(response) {
        console.log("succes");
        console.log(response);
      });   
    }

}

现在我收到的错误是：

错误：[$ sce：insecurl] http://errors.angularjs.org/1.6.9/$sce/insecurl?p0=https%3A%2F%2Fwww.westelm.com%2Fservices%2Fcatalog%2Fv4%2Fcategory%2Fshop%2Fnew%2Fall-new%2Findex.json

Answer 1

您收到错误，因为网址中包含?callback=JSON_CALLBACK，不再允许。

来自文档：

错误：$ http：badjsonp

错误的JSONP请求配置

描述

从配置对象生成的URL包含与配置的jsonpCallbackParam属性同名的参数时，会发生此错误;或者当它包含值为JSON_CALLBACK的参数时。

$http JSONP请求需要将回调查询参数附加到URL。此参数的名称在配置对象（或默认值）中通过jsonpCallbackParam属性指定。您不得在请求的配置中使用此名称提供自己的参数。

在以前版本的AngularJS中，您指定了通过JSON_CALLBACK占位符添加回调参数值的位置。 不再允许这样做。

要解决此错误，请删除与jsonpCallbackParam同名的所有参数;和/或删除任何值为JSON_CALLBACK的参数。

有关详细信息，请参阅$http.jsonp()方法API文档。

— AngularJS Error Reference - badjsonp

在AngularJS中完成JSONP的方式随V1.6而改变。

有关详细信息，请参阅AngularJS Developer Reference - Migrating to V1.6 - $http。

AngularJS V1.6 JSONP给出了$ http.badjsonp错误

1 个答案:

错误：$ http：badjsonp

错误的JSONP请求配置

描述