No access control allow origin header using $http and angular

Question

I am trying to consume the Flickr API using angular, however whenever I try and make a request I get this error. I have looked online but can't seem to get a decent answer

XMLHttpRequest cannot load https://api.flickr.com/services/feeds/photos_public.gne?tags=potato&tagmode=all&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

Here is my code for the request - I am trying to do this 100% with angular and not have to run a server

FlickrController.$inject = ['$http']


function FlickrController($http){
  var self = this 
  this.newPhoto = {}
  // this.photos = Photo.query();

  this.getPhoto = function(){
    console.log('gettinghere')
    $http
    .get('https://api.flickr.com/services/feeds/photos_public.gne?tags=potato&tagmode=all&format=json')
    .then(function(response){
      var photoData = response.data
      console.log(photoData)
      self.addPhoto(photoData)
    })
  }

score 0 · Answer 1 · answered Oct 27 '15 at 14:07

This is not AngularJS thing, but rather server communication thing in general.

Access-Control-Allow-Origin has to be send from server. Request was perfomed by your javascript app. But browser stopped passing response because of different domain and no Access-Control-Allow-Origin given.

I am not sure if it is possible to set Flicker api to send this. but it is possible to do endpoint on your own server, which sends your request to flicker. Because as i said. Only browser stopped the response.

If you do not have any backend (some test app) you can use some kind of proxy - https://www.npmjs.com/package/proxy-middleware

Then your api do request to localhost:8000/api/ and there would be proxy which communicate with original flicker api.

No access control allow origin header using $http and angular

1 Answers1