Question

我正在尝试使用AngularJS访问API，但是我收到以下错误：

unichr()

这是我的服务代码：

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.

我使用身份验证令牌（api密钥）来访问api，但根据API所有者，不会发送或识别此API密钥头。您是否知道如何调整代码以使其工作？谢谢！

Answer 1

在发布此类公共网站之前，您应隐藏该API密钥。我建议你重新生成你的密钥（如果可能的话）以防万一 - 比抱歉更安全。

假设您的网站网址是＆＃39; http://purepremier.com＆＃39;从错误消息中，API应该添加一个＆＃39; Access-Control-Allow-Origin＆＃39;标题与您的网站网址，以允许您访问。有关详细信息，请查看here。

这与您的问题没有直接关系，但我注意到每次调用getTeams（）时都会设置$ http默认值。您应该在实际函数调用之外设置它（最好在run块中），或者只发送具有特定应用标头的GET请求。由于API密钥是针对该呼叫的特定（我假设），因此您可能不希望每次发出HTTP请求时都将其发送给任何人和所有人。

Answer 2

更改您的工厂代码：

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;
            });
       }       

    }
 });

在控制器中注入工厂并检索数据：

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

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

这是工作plunker

Answer 3

尝试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密钥头。 Angularjs

3 个答案: