API-key header is not sent (or recognized). Angularjs

Question

I'm trying to access an API with AngularJS but I get the following error:

XMLHttpRequest cannot load http://www.football-data.org/alpha/soccerseasons/398/leagueTable?callback=JSON_CALLBACK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://purepremier.com' is therefore not allowed access.

This is my code for the service:

angular.module('PremierLeagueApp.services', []).
  factory('footballdataAPIservice', function($http) {

    var footballdataAPI = {};

    footballdataAPI.getTeams = function() {
        $http.defaults.headers.common['Auth-Token'] = 'token';
      return $http.get('http://www.football-data.org/alpha/soccerseasons/398/leagueTable?callback=JSON_CALLBACK');
    };
    return footballdataAPI;
  });

I use an authentication token (api key) to access the api, but according the API owner this API key header is not sent or recognized. Do you have any idea how I can adapt the code to make this work? thanks!

score 2 · Answer 1 · edited May 23 '17 at 12:00

You should hide that API key before posting on a public site such as this. I would advise you regenerate your key (if possible) just in case - better safe than sorry.

Assuming your site url is 'http://purepremier.com' from the error message, the API should add a 'Access-Control-Allow-Origin' header with your site URL to allow you access. Have a look here for more information.

This is not directly related to your problem, but I notice you are setting $http defaults every time getTeams() is called. You should either set this outside of the actual function call (preferably in a run block), or just send the GET request with that header specifically applied. As the API key is specific (I assume) to that call, you may not want to be sending it to anyone and everyone, every time you make a HTTP request.

Tomislav · Answer 2 · 2015-08-14T08:23:58.847

2

Change your factory code like this:

factory('footballdataAPIservice', function($http) {

    return {
       getTeams: function(){
          return $http({
              url:'http://www.football-data.org/alpha/soccerseasons/398/leagueTable',
              headers: { 'X-Auth-Token': 'your_token' },
              method: 'GET'
          }).success(function(data){
              return data;
            });
       }       

    }
 });

Inject factory in your controller and retreive the data:

.controller('someController',function(footballdataAPIservice,$scope){

      footballdataAPIservice.getTeams().then(function(data){
             $scope.teams=data;
              console.log($scope.teams)
       });
});

Here is the working plunker

edited Aug 14 '15 at 08:23

answered Aug 14 '15 at 07:49

Tomislav

3,181
17
20

thanks your plunker was working before but now it doesn't :S any ideas? – user1937021 Aug 14 '15 at 20:05
ah it seems the api is down at moment. – user1937021 Aug 14 '15 at 20:17

score 0 · Answer 3 · answered Aug 14 '15 at 08:43

0

You change the Auth-Token To Authorization

$http.defaults.headers.common['Authorization'] = 'token';

Because token is send via headers using Authorization

answered Aug 14 '15 at 08:43

Anandhan Suruli

365
3
13

score 0 · Answer 4 · answered Aug 14 '15 at 09:05

try jsonp

angular.module('PremierLeagueApp.services', []).
  factory('footballdataAPIservice', function($http) {

    var footballdataAPI = {};

    footballdataAPI.getTeams = function() {
        $http.defaults.headers.common['Auth-Token'] = 'token';
      return $http.jsonp('http://www.football-data.org/alpha/soccerseasons/398/leagueTable?callback=JSON_CALLBACK');
    };
    return footballdataAPI;
  });

API-key header is not sent (or recognized). Angularjs

4 Answers4

Linked