Angular 1.6.3
不允许在 1.5.8
中允许的请求,我收到此错误:
$sce:insecurl
Processing of a Resource from Untrusted Source Blocked
完整错误可用here .
我想将我的 Angular 版本升级到 1.6.3
以获得最新最好的版本,但我依赖于此 API。有没有办法让我将其标记为可信 API 或使用此 API 的其他方式?导致此问题的这两个版本之间有什么区别?
这是我要运行的代码:
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
最佳答案
$http.jsonp
AngularJS V1.6 的变化
将用于将 JSONP 回调传输到
服务器现在通过 jsonpCallbackParam
配置值指定,而不是使用 JSON_CALLBACK
占位符。
- 在 JSONP 请求 URL 中使用
JSON_CALLBACK
都会导致错误。 - 任何提供与给定名称同名的参数的请求
通过
jsonpCallbackParam
配置属性将导致错误。
这是为了防止恶意攻击通过应用程序的响应无意中允许使用不受信任的数据来生成回调参数。
由于 petfinder API 使用默认值 "callback"
,只需将其从查询字符串中删除即可:
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:
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.Before:
$http.jsonp('trusted/url?callback=JSON_CALLBACK'); $http.jsonp('other/trusted/url', {params: {cb: 'JSON_CALLBACK'}});
After:
$http.jsonp('trusted/url'); $http.jsonp('other/trusted/url', {jsonpCallbackParam: 'cb'});
另见:
- AngularJS Error Reference -
$http:badjsonp
Bad JSONP Request - AngularJS $http Service API Reference - $http.jsonp
AngularJS V1.6 的进一步变化
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:
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?**' ]); }]);
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));
另见:
关于javascript - Angular 1.6.3 不允许 1.5.8 中允许的 JSONP 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42706549/