I have a peculiar problem that I just can't seem to find an explanation.
I'm working on an AngularJS site for our family and am integrating data from various web services. Currently I am working on the photos section which will integrate in photos from our Flickr account.
I have a main page which lists the various
photo sets and displays the set's primary
photo along with the title. (Note: I'm using the Flickr 'extras' parameter to return the primary
photo's URL in the API calls.)
<div data-ng-repeat="p in vm.photoSets">
<a ng-href="#/photos/{{p.id}}">
<img ng-src="{{p.primary_photo_extras.url_s}}"></img>
</a>
<h4>{{p.title._content}}</h4>
</div>
When clicking on the
photo, the routing will display a page with a list of all the photos from that set, showing the image and the title.
<div data-ng-repeat="p in vm.photoSetData.
photo">
<a ng-href="#/photos/{{vm.photoSetId}}/{{p.id}}"
<img ng-src="{{p.url_s}}"></img>
</a>
<h4>{{p.title}}</h4>
</div>
Now, here's where the problem is occuring. When I
upload the code to my public website on my hosting provider, everything works just fine. Both pages display their respective photos. However, when I attempt to run the site on my local system, either in MAMP or NodeJS (using http-server), the second page gives me an error for each image:
Error: [$interpolate:interr] Can't interpolate: {{p.url_s}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: https://farm1.staticflickr.com/37/82749767_e82ff60ce3_m.jpg
http://errors.angularjs.org/1.2.9/$sce/insecurl?p0=https%3A%2F%2Ffarm1.staticflickr.com%2F37%2F82749767_e82ff60ce3_m.jpg
http://errors.angularjs.org/1.2.9/$interpolate/interr?p0=%7B%7Bp.url_s%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20Blocked%20loading%20resource%20from%20url%20not%20allowed%20by%20%24sceDelegate%20policy.%20%20URL%3A%20https%3A%2F%2Ffarm1.staticflickr.com%2F37%2F82749767_e82ff60ce3_m.jpg%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Ffarm1.staticflickr.com%252F37%252F82749767_e82ff60ce3_m.jpg
minErr/<@http://localhost/scripts/angular.js:78
$interpolate/fn@http://localhost/scripts/angular.js:8254
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost/scripts/angular.js:11800
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost/scripts/angular.js:12061
done@http://localhost/scripts/angular.js:7843
completeRequest@http://localhost/scripts/angular.js:8026
createHttpBackend/</jsonpDone<@http://localhost/scripts/angular.js:7942
jsonpReq/doneWrapper@http://localhost/scripts/angular.js:8039
jsonpReq/script.onerror@http://localhost/scripts/angular.js:8053
The API call to Flickr is successful and returns the correct data. In fact, the image title does display! I've tested it with Firefox, Safari and Chrome...all three browsers fail.
I cannot find any explanation as to why it would work remotely but fail locally. Also, the images show up on the first page, but not on the second, even though one of the images on the second page is the same image URL as on the first page. Even going directly to the second page, bypassing the first page, still fails.
Any ideas on how to fix this? It would be nice to test locally without having to
upload to the server each time I make a change.
Update:
I have shut off the $sce security to see if that was causing the issue. Although it resulted in turning the error off, the files still don't load on the local test server. I have used the developer tools' network monitor and it doesn't even show an attempt to retrieve the files. AngularJS appears to shut down the retrieval, although the correct path shows up in the DOM.
