如何从 Angular 请求中检索 JSON 数据以访问另一个域的资源？

Question

我有一个奇怪的问题，我已经解决了几天。 问题与跨域资源共享（CORS）有关，我正在发出 Angular GET 请求，并且能够在 Firefox/Chrome 的开发人员工具中看到收到 JSON 响应正文，但是 JavaScript（或浏览器，或服务器）拒绝将响应正文交给我。 这是我的要求：

$http = angular.injector(["ng"]).get("$http"); //angular http object
 $http = angular.injector(["ng"]).get("$http"); 
    $http({
      method: 'GET',
      url: 'api.example.com/myPath',
      headers: {
        'Content-Type': 'application/json',

      }
    }).then(function successCallback(response) {
  
      alert("succeed: db "+JSON.stringify(response)); //this is not called
    

    }, function errorCallback(response) {
      alert("failed: " + JSON.stringify(response));//this is called
    });

如 cmets 中所述，调用失败函数而不是成功函数。 我可以提及/发布我到过这里的 Stack-overflow 和其他链接，但其中有 50 个，所以这里是其中的一些：

1. SO 1
2. SO 2
3. SO 3
4. SO 4
5. SO 5
6. Reddit 1
7. SO 6
8. GitHub 1

我尝试过的标题（除了代码中显示的）：

"headers": {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Origin': '*'
      }

"headers": {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Accept': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': '*'
      }

尝试了以上所有方法，其中一些将不会收到 JSON 响应，而是发送 OPTIONS 请求并停止。

这是 Firefox 输出的样子：

Network

Console

这是警报功能的输出：

failed: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"api.example.com/myPath","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"}

我尝试过的其他事情： 为 Chrome 安装名为 CORS 的插件：Was not effective at all, no difference

注意 Endpoints 服务器不是 NodeJS，它是 Java，我在网上遇到的大多数答案都建议在服务器上添加这些 headers，但我的同事 坚持使用前端Angular可以解决这个问题（特别是在他们看到正确的响应主体Json信息实际上来自服务器后，如附图所示）

Answer 1

如果您使用的是 Angularjs 版本 >= 1.4，请这样做（注意问题）

$http({
  method: 'GET',
  url: 'api.example.com/myPath',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }
}).then(function(response) {
  alert("succeed: db "+JSON.stringify(response)); //this is not called

}).catch(function(response) {
  alert("failed: " + JSON.stringify(response));//this is called
});

Answer 2

试试这个

$http.get('api.example.com/myPath').then(
  function(res){ 
    alert('success')
    },
   function(err){
     alert(err)
  })

Answer 3

事实证明，只有前端没有修复，只有在 Java 端点添加响应标头之后，浏览器才将 JSON 响应数据发回给我，在 NodeJS 中，我之前通过以下添加使其工作正常：

 request(options, function(err, response, body) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.json(response);
  })

我不确定在 Java 中是如何做到的，但他们基本上就是这样做的，只是将这些东西添加到 Java Web 服务中。 就像 Java 服务器（尽管向浏览器发送 JSON 响应）告诉浏览器（“不要把数据交给他，因为我没有这样的指令”）。我想这有点滑稽，但事实就是这样。