angularjs - Tumblr API 角 $http GET

Question

我在 Tumblr 和 Angular 方面遇到了一个我无法弄清楚的 API 问题。当使用 $http 尝试从某个博客获取信息时，它会保持“预检响应无效”。我想我在看这段代码时会有点眼花缭乱。有人会看看这个并告诉我我做错了什么吗？谢谢。

$scope.tumblrKey = 'mldv2B4xUD5roLX8XfbYdgJhzlgLxfm8mBRuKQhBxXsUFLiqEx';
$scope.tumblrUrl = 'http://api.tumblr.com/v2/blog/whileoutriding.tumblr.com/info?api_key=';

$http({
  method: 'GET',
  headers: {
    'Authorization': $scope.tumblrKey
  },
  url: $scope.tumblrUrl + $scope.tumblrKey
}).then(function successCallback(response) {

    console.log('it worked', response);

  }, function errorCallback(response) {

    console.log('it did not work', response);

});

Answer 1

这个问题通常是由于 CORS-Cross Origin Resource Sharing 造成的。您尝试访问的第 3 方 API 应该允许来自您的站点的请求。看起来它不允许你这样做，基本上检查你是否可以对该 API 进行 GET 调用的飞行前请求失败了。如此处链接中所述，有多种方法可以修复它。

Answer 2

您可以像这样更改您的$http请求：

$http({
      method: 'jsonp',
      dataType: 'json',
      headers: {
        'Authorization': $scope.tumblrKey
      },
      params: {
        format: 'jsonp',
        callback: 'JSON_CALLBACK'
    },
      url: $scope.tumblrUrl + $scope.tumblrKey
    })

这是一个带有工作代码的 plunkr

这似乎工作正常。祝你好运！