来自 Rest API 的动态 Json 结果未返回到 Angular 控制器答案

【问题标题】：Dynamic Json result from RestAPI not being returned to Angular controller来自 Rest API 的动态 Json 结果未返回到 Angular 控制器
【发布时间】：2015-04-21 14:08:31
【问题描述】：

我从 REST API 中提取了 Json 数据。成功后，我创建了一个简单的警报，它将在 $http.get 中显示 Json 结果。我找到了一个指向 Json 在线数据进行测试的示例 URL，我收到了结果很好的警报。但是当我尝试使用指向 api 的 URL 来执行此操作时，我没有得到任何结果（甚至没有警报）。但是，当我使用相同的 URL 并将其放入浏览器时，我所有的 Json 数据都在那里。关于可能导致此问题的任何想法或想法？谢谢。

JavaScript（带有测试 Json 数据）

var myApp = angular.module('paladinMonitor', ["highcharts-ng"]);

myApp.controller('SizeCtrl', function ($scope, $http, $timeout) {
    $http.get('http://ip.jsontest.com/?callback=showMyIP').success(function (data, status) {
        alert(data)
    });

【问题讨论】：

检查您的 javascript 控制台以查看您是否收到错误消息。 $http.get 有一个错误方法和一个成功方法，您也可以使用它来提醒您出现错误。

标签： json angularjs rest

【解决方案1】：

我也遇到过类似的事情。 Restful Web 服务必须使用Access-Control-Allow-Origin 标头来指定允许哪些来源访问该服务。没有它，您可以通过将地址直接放在浏览器中来成功访问 Web 服务，但它在您的应用程序中不起作用。如果您的 REST 服务是用 Java 编写的，您可以查看 this question 了解有关如何添加适当标头的详细信息。其他语言将使用类似的机制。

我的另一个猜测是 Web 服务需要授权才能访问。它在您的浏览器中运行良好，因为您曾经提供了正确的凭据和您的浏览器缓存了它们。如果您的服务确实需要授权，请参阅this page 上的“设置 HTTP 标头”部分，了解有关如何添加适当标头的信息。

【讨论】：

这很好。我正在使用 C#，但是当我使用 Fiddler 运行时，我注意到一条错误消息“不存在代理授权标头”。和“不存在授权标头”。我认为您对服务器不允许从应用程序访问是正确的。我会做更多的研究并很快发布跟进。谢谢！
是的，如果这是您遇到的错误，那么几乎可以肯定这就是问题所在。您至少应该添加Access-Control-Allow-Origin 标头，但也可能添加Access-Control-Allow-Methods、Access-Control-Allow-Headers 和（如果您使用凭据）Access-Control-Allow-Credentials。您仍然可以使用我提到的帖子来获取适当的值。
您的网络服务是否需要身份验证/授权？您第一次在网络浏览器中访问该域时，它是否要求您输入密码或其他身份验证令牌？
是的。另外，我不确定该错误消息是否正是导致数据无法跨域工作的问题，但我认为根据您所说的内容是有道理的。简而言之，我认为它归结为 CORS 限制数据从 api（域 a）传输到客户端（域 b）。现在的问题是当我们使用 Json Web Token 和 Auth0 时，最好的授权方式。
如果 Web 服务需要身份验证，则更有可能是这个问题，而不是 CORS 问题。请参阅我（已编辑）答案的第二部分。

【解决方案2】：

正如 Alvin Thompson 所提到的，您必须设置访问控制允许来源，还应该在服务器端设置访问控制允许标头、访问控制允许凭据。就我而言，我必须在我的 WebAPIcontroller 中执行此操作。这是因为为了使 CORS 工作（跨域），您必须让服务 1（在我的情况下为 RESTApi）允许服务 2（客户端）接收调用它的权限。为了实现这一点，我必须添加以下 NuGet 包

NuGet

-   Microsoft.AspNet.Cors NuGet package
-   Microsoft.Owin.Cors NuGet package

一旦安装了这些，我就去我的 API 项目的配置文件并添加了

API App_Start/WebApiConfig.cs

    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();
    }

然后在继承 API 控制器的控制器中，我引用了我安装的 NuGet 包并在客户端启用了 CORS，这是您设置来源、标头和方法的地方

你的控制器：ApiController

namespace YourNamespace.Controllers
{
     [EnableCors(origins: "https://localhost:.....", headers: "*", methods: "*")]
        public class YourController : ApiController
        {
            //The rest of your controller functionality
        }
}

我遇到的其余问题是如何将 Json Web Token 变量传递到我的 javascript 文件中。我仍在努力，当我弄清楚时我也会发布这个答案。

要了解有关 CORS 问题的更多信息，这对我来说是最好的参考：http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

【讨论】：