Question

我有一个Angular应用程序，目前是我打开的HTML文件，但很快就会转换为服务器/通过localhost访问。我使用$ http来访问第三方API（我无法控制它的响应;大多数API调用都有效，但有些则没有，并抛出错误：

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

抛出该错误的API调用是返回0结果的搜索（在该示例中，数据库不返回“susage”的结果）。在“网络”选项卡中，无法加载响应，并且未列出任何响应标头;对于其他工作API调用，在Response Headers下，存在必要的“Access-Control-Allow-Origin：*”。

API肯定会形成一个响应并尝试将其发回，但无论出于何种原因都会失败。访问发布的网址会显示响应。

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

为了进行比较，搜索结果（正确拼写'香肠'）与没有结果的搜索：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

为了揭露＆＃34; -1＆＃34;对UI的状态（超时），我更改了服务方法以简单地返回promise，如下所示：

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

然后您可以在控制器中处理错误，如下所示：

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

修复第三方API“Access-Control-Allow-Origin”错误

1 个答案: