angularjs - 修复第 3 方 API 'Access-Control-Allow-Origin' 错误

Question

我有一个 Angular 应用程序，目前我打开的是一个 HTML 文件，但它很快就会转换为服务器/通过本地主机访问。我使用 $http 访问第 3 方 API(我无法控制其响应；大多数 API 调用有效，但有些无效并抛出错误:

XMLHttpRequest 无法加载 http://api.nal.usda.gov/ndb/search/?format=json&api_key=RJEnADgGbCjfJYi0z8vuVnelYXn2Smud2Dfi2u2F&q=susage .请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问 Origin 'null'。响应具有 HTTP 状态代码 404。

引发该错误的 API 调用是返回 0 个结果的搜索(在示例中，数据库不返回“susage”的结果)。在网络选项卡中，无法加载响应并且没有列出响应 header ；对于其他工作的 API 调用，在 Response Headers 下，存在必要的“Access-Control-Allow-Origin:*”。

API 肯定会形成响应并尝试将其发回，但由于某种原因而失败。访问发布的 url 会显示该响应。

当 API 理解并且对两个调用都有响应时，为什么只有空搜索会抛出错误，我该如何解决？我更希望我的前端直接与 API 通信，而不是与我的后端通信，而我的后端又与 API 通信。

为了比较，有结果的搜索(正确拼写“sausage”)与没有结果的搜索:http://imgur.com/a/ihhI1

$http 代码:

return $http.get('http://api.nal.usda.gov/ndb/search/?format=json', {
            params: {
                api_key: usdaKey,
                q: query
            }
        })

Answer 1

为了向 UI 公开“-1”状态(超时)，我将服务方法更改为简单地返回 promise ，如下所示:

var search = function(query) {
  return $http.get('http://api.nal.usda.gov/ndb/search/?format=json', {
    params: {
      api_key: usdaKey,
      q: query
    }
  });
};

然后你可以在你的 Controller 中处理这个错误，像这样:

$scope.search = function(query) {
  $scope.items = [];
  $scope.err = null;
  foodInfo.search(query).then(function(response) {
    console.log(response);
    $scope.items = response.data.list.item;
  }, function(e) {
    console.log('Error status: ' + e.status);
    if (e.status === -1) {
      $scope.err = 'No data found';
    }
  });
};