Angular 1.6.3不允许1.5.8中允许的JSONP请求 [英] Angular 1.6.3 is not allowing a JSONP request that was allowed in 1.5.8

问题描述

角度1.6.3不允许在1.5.8中允许的请求，但出现此错误:

Angular 1.6.3 is not allowing a request that was allowed in 1.5.8 and I am getting this error:

$sce:insecurl
Processing of a Resource from Untrusted Source Blocked

完整错误可用我想将我的angular版本升级到1.6.3，以获得最新和最好的版本，但是我依赖于此API.我是否可以将其标记为受信任的API或使用该API的另一种方法?这两个版本之间的区别是什么?

I would like to upgrade my version of angular to 1.6.3 to get the latest and greatest, but I am dependent on this API. Is there a way for me to mark this as a trusted API or another way to use this API? What is the difference between these two versions that is causing this?

这是我要运行的代码:

var app = angular.module('app', []);
app.controller('firstController', ['$http', function($http) {
  console.log('firstController up and running');
  var key = 'XXXXXXXXXXXXX'; // is an actual key
  var self = this;

  self.animal = {};

  self.getRandomPet = function(){
    var query = 'http://api.petfinder.com/'; // baseURL for API
    query += 'pet.getRandom'; // selecting the method we would like to return
    query += '?key=' + key; // Giving petfinder our key
    query += '&format=json'; // Telling petfinder we want our response to be JSON
    query += '&output=basic'; // Telling petfinder what data we want (more than just id)
    var request = encodeURI(query) + '&callback=JSON_CALLBACK'; // removing spaces and special characters from response as well as making jsonp work with the callback

    console.log('Request:', request);

    $http.jsonp(request).then(function(response){
      console.log(response);
      self.animal = response.data.petfinder.pet;
    });

  }

  self.getRandomPet();
}]);

可在此处找到整个存储库: https://github.com/LukeSchlangen/angular- petfinder-api

The entire repository is available here: https://github.com/LukeSchlangen/angular-petfinder-api

推荐答案

$http.jsonp AngularJS V1.6的更改

用于将JSONP回调传输到的查询参数 现在，服务器是通过jsonpCallbackParam配置值指定的，而不是使用JSON_CALLBACK占位符.

$http.jsonp Changes for AngularJS V1.6

The query parameter that will be used to transmit the JSONP callback to the server is now specified via the jsonpCallbackParam config value, instead of using the JSON_CALLBACK placeholder.

• 在JSONP请求URL中使用JSON_CALLBACK都会导致错误.
• 任何提供名称与给定名称相同的参数的请求 jsonpCallbackParam config属性会导致错误.

• Any use of JSON_CALLBACK in a JSONP request URL will cause an error.
• Any request that provides a parameter with the same name as that given by the jsonpCallbackParam config property will cause an error.

这是为了防止由于应用程序的响应而导致的恶意攻击，该响应无意中允许使用不受信任的数据来生成回调参数.

This is to prevent malicious attack via the response from an app inadvertently allowing untrusted data to be used to generate the callback parameter.

由于petfinder API使用默认值"callback"，因此只需从查询字符串中将其删除:

Since the petfinder API uses the default value "callback", simply delete it from the query string:

self.getRandomPet = function(){
    var query = 'http://api.petfinder.com/'; // baseURL for API
    query += 'pet.getRandom'; // selecting the method we would like to return
    //query += '?key=' + key; // Giving petfinder our key
    //query += '&format=json'; // Telling petfinder we want our response to be JSON
    //query += '&output=basic'; // Telling petfinder what data we want
    //var request = encodeURI(query) + '&callback=JSON_CALLBACK'; 

    //console.log('Request:', request);

    var params = { key: key,
                   format: 'json',
                   output: 'basic'
                 };                      

    //$http.jsonp(request).then(function(response){
    $http.jsonp(query, { params: params }).then(function(response){
      console.log(response);
      self.animal = response.data.petfinder.pet;
    });

  }

$ http:

由于 fb6634 ，您将无法再使用JSON_CALLBACK占位符JSONP请求.取而代之的是，您必须提供查询参数的名称，该参数将通过config对象的jsonpCallbackParam属性传递回调，或通过$http.defaults.jsonpCallbackParam属性将应用程序范围传递给回调，默认情况下为"callback".

$http:

Due to fb6634, you can no longer use the JSON_CALLBACK placeholder in your JSONP requests. Instead you must provide the name of the query parameter that will pass the callback via the jsonpCallbackParam property of the config object, or app-wide via the $http.defaults.jsonpCallbackParam property, which is "callback" by default.

之前:

$http.jsonp('trusted/url?callback=JSON_CALLBACK');
$http.jsonp('other/trusted/url', {params: {cb: 'JSON_CALLBACK'}});

之后:

$http.jsonp('trusted/url');
$http.jsonp('other/trusted/url', {jsonpCallbackParam: 'cb'});

— AngularJS开发人员指南-从V1迁移. 5至V1.6

另请参阅:

• AngularJS错误参考-$http:badjsonp JSONP请求错误
• AngularJS $ http服务API参考-$ http.jsonp

• AngularJS Error Reference - $http:badjsonp Bad JSONP Request
• AngularJS $http Service API Reference - $http.jsonp

由于 6476af ，所有JSONP请求现在都要求该URL受信任作为资源URL.有两种信任URL的方法:

Due to 6476af, all JSONP requests now require the URL to be trusted as a resource URL. There are two approaches to trust a URL:

1. 使用$sceDelegateProvider.resourceUrlWhitelist()方法列入白名单.您可以在模块配置块中配置以下列表:

1. Whitelisting with the $sceDelegateProvider.resourceUrlWhitelist() method. You configure this list in a module configuration block:

appModule.config(['$sceDelegateProvider', function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhiteList([
      // Allow same origin resource loads.
      'self',
      // Allow JSONP calls that match this pattern
     'https://some.dataserver.com/**.jsonp?**'
  ]);
}]);

通过$sce.trustAsResourceUrl(url)方法明确信任URL.您可以将受信任的对象而不是字符串作为URL传递给$ http服务:

Explicitly trusting the URL via the $sce.trustAsResourceUrl(url) method. You can pass a trusted object instead of a string as a URL to the $http service:

var promise = $http.jsonp($sce.trustAsResourceUrl(url));

— AngularJS开发人员指南-从V1迁移. 5至V1.6

另请参阅:

• AngularJS Error Reference - $sce:insecurl Untrusted Source Blocked

AngularJS $ http服务API参考-$ http.jsonp

这篇关于Angular 1.6.3不允许1.5.8中允许的JSONP请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！