Blocked loading resource from Open Weather

Question

working on AngularJs application and calling the Open Weather API through $resource, facing the following issue.

Blocked loading resource from url not allowed by $sceDelegate policy. URL: http://samples.openweathermap.org/data/2.5/forecast

Code

$scope.weatherAPI = $resource('http://samples.openweathermap.org/data/2.5/forecast',
    { callback: 'JSON_CALLBACK' },
    { get: { method: 'JSONP' } }
);

$scope.weatherResul = $scope.weatherAPI.get({ q: $scope.srchCityName

Any Idea, how to fix?

Answer 1

I believe you have to enable the URL as a trusted resource. I never use $resource, so the mechanics might be a bit different, but basically you have to inject $sce and then call $sce.getTrustedResourceUrl('http://samples.openweathermap.org/data/2.5/forecast'). With $resource you may be able to do this:

$scope.weatherAPI = $resource($sce.getTrustedResourceUrl('http://samples.openweathermap.org/data/2.5/forecast'),
    { callback: 'JSON_CALLBACK' },
    { get: { method: 'JSONP' } }
);

If that doesn't work, then see this answer: $sce.trustAsResourceUrl() globally for a global whitelist solution.

Answer 2

You don't even need to do that just remove CALLBACK and JSONP

$resource("http://api.openweathermap.org/data/2.5/weather/?APPID=YOURAPPID");