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

【问题标题】：AngularJS V1.6 JSONP is giving $http.badjsonp errorAngularJS V1.6 JSONP 给出 $http.badjsonp 错误
【发布时间】：2018-09-11 02:20:51
【问题描述】：

我正在尝试从外部 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

【问题讨论】：

如果 API 未启用 CORS 或未提供 JSONP，您必须在您的服务器或第三方服务上使用代理。这两种情况似乎都不成立
请不要尝试从答案中更新问题，然后将问题更改为新问题；如果答案解决了您的原始错误，请将答案标记为已接受，如果您现在收到新错误，请使用新错误创建一个新问题，并引用此问题有必要的。要求不断变化的问题使新读者很难弄清楚发生了什么，也很难确定哪些答案真正适用于问题的哪一部分。

标签： angularjs angularjs-http angular1.6

【解决方案1】：

您收到错误是因为 URL 中包含 ?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。

【讨论】：