Bloomapi, XMLHttpRequest cannot load

Question

I am currently using the API at www.bloomapi.com with AngularJS and keep getting this reject:

XMLHttpRequest cannot load http://www.bloomapi.com/api/search?limit=1&offset=0&key1=npi&op1=eq&value1=1861733537. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

I'm not sure if the issue is BloomAPI specific (e.g. if I need an API key or something), or if there is something wrong with my API call.

This is my code...

FACTORY:

.factory('ProviderService', ['$resource', function($resource) {
  return $resource('http://www.bloomapi.com/api/search?limit=1&offset=0&key1=npi&op1=eq&value1=:npi',
    {npi:'@npi'}
  )}
])  

CONTROLLER:

ProviderService.get({npi:'1861733537'}, function(res) {
  $scope.providerNPI = res.id;
  $scope.providerName = res.result.last_name;
  console.log($scope.providerName);
});

Thank you very much!

Answer 1

Based on the error, it looks like AngularJS uses CORS by default for $resource requests. BloomAPI doesn't currently support CORS but does support JSONP.

I haven't ever done JSONP in AngularJS before but found a few promising looking resources such as http://www.bennadel.com/blog/2610-using-jsonp-with-resource-in-angularjs.htm that may help resolve the issue.

Let me know if this doesn't work with your scenario for some reason, and I'd be happy to take a look at implementing CORS in BloomAPI sooner rather than later.