0

I am trying to get details from an external API but got stuck in getting the JSON response.

Here is my service code:

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;
                }
    );

    }
}

I am getting below error message:

Error: [$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

But the API is running fine. How can I hit this API to get the data?

Updated code based on given answer:

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);
      });   
    }

}

Now I am getting error as :

Error: [$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

4

1 回答 1

0

您收到错误是因为 URL 包含?callback=JSON_CALLBACK在其中，这是不再允许的。

从文档：

错误：$http:badjsonp

错误的 JSONP 请求配置

描述

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

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

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

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

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

— AngularJS 错误参考 - badjsonp

在 AngularJS 中完成 JSONP 的方式在 V1.6 中发生了变化。

有关更多信息，请参阅AngularJS 开发人员参考 - 迁移到 V1.6 - $http。

于 2018-04-01T22:02:31.007 回答