尝试跨站点 JSON 使用 JS(Angular）请求 API

Trying to Cross-Site JSON request an API with JS (Angular)

本文关键字：Angular 请求 API JS 使用 站点 JSON      更新时间：2023-09-26

>我有这个：

          var profileURL = "http://api.steampowered.com/ISteamUser/ResolveVanityURL/v0001/?key=5D1F1F5F31D68C060625DF544BF0E8C4&vanityurl=".concat(profileName);
        var profileJSON = $http.jsonp(profileURL)
          .success(function(data, status, headers, config) {
          console.log(jsonencode(data));
        //console.log(status);
         // console.log(headers);
         // console.log(config);
      })
      .error(function(data, status, headers, config) {
         // console.log(data);
          //console.log(status);
         // console.log(headers);
         // console.log(config);
      });

如您所见，我正在尝试查询 Steam 服务器。如果我使用 $http.get 而不是$http.jsonp则会收到有关跨站点限制的错误。我听说过 CORS，但不知道如何在我的场景中实现它。

任何将正确的响应数据放入变量的帮助都会很棒。

非常感谢

如果 jsonp 不是一个选项，并且您不介意投入额外的工作，那么一个好的解决方案是编写一个小的反向代理。

在计算机网络中，反向代理是一种代理服务器，它 代表客户端从一个或多个服务器检索资源。 然后将这些资源返回到客户端，就好像它们一样 源自代理服务器本身。 维基百科 - 反向代理

您可以使用任意数量的http服务器框架编写反向代理，例如用于C#的Nancy或用于javascript/coffeescript的node.js服务器。

重要的是确保代理在与您的角度应用程序相同的域下运行。现在，您可以通过代理路由来自 angular 应用程序的所有 ajax 调用，并且由于它位于同一域中，因此不存在跨站点问题。

然后，代理可以自由调用您喜欢的任何 API，通常对我来说，这将是我自己的自定义 API，它封装了我的所有业务逻辑以及我需要对第三方 API 进行的任何调用，例如谷歌翻译。代理的工作是进行调用并将 json 返回到角度应用程序。

以这种方式做事还有一个额外的好处，即您的代理可以从第三方 API 重新打包 json，以适应您在 angular 应用程序中可能具有的任何标准。这对于处理来自各种来源的错误特别有用。代理处理错误，并将标准化的错误包传回角度应用。

事实上，经验表明，一旦你有一个代理，你就会开始发现它的很多用途。例如，谁会想要从角度调用需要私有 API 密钥的 API？这样做会在客户端代码中公开密钥，以便任何人滥用。使用代理，所有这些详细信息都安全地隐藏在服务器上。

如果您确实沿着节点.js路线前进，请考虑使用 request 进行 http 调用，因为这为代理和管道请求/响应提供了显式支持。

CORS 必须由服务器启用。由于您不拥有 steam 上的服务器，因此无法启用 CORS。如果您只是将callback附加到查询字符串上，某些公共 API 服务将发回 jsonp。

喜欢这个：

var profileURL = "http://api.steampowered.com/ISteamUser/ResolveVanityURL/v0001/?key=PRIVATE_API_KEY&vanityurl=".concat(profileName).concat("&callback=callback");
相关文章：