javascript - 尝试使用 JS (Angular) 跨站点 JSON 请求 API

Question

我有这个:

          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，但不知道如何在我的场景中实现它。

任何有关将正确的响应数据导入变量的帮助都很棒。

非常感谢

Answer 1

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

In computer networks, a reverse proxy is a type of proxy server that retrieves resources on behalf of a client from one or more servers. These resources are then returned to the client as though they originated from the proxy server itself. wikipedia - reverse proxy

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

重要的是确保代理在与您的 Angular 应用程序相同的域下运行。现在，您可以通过代理路由 Angular 应用程序中的所有 ajax 调用，因为它在同一域中，所以没有跨站点问题。

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

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

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

如果你确实走 node.js 路线，那么考虑使用 request用于进行 http 调用，因为这为代理和管道请求/响应提供了明确的支持。