从 AngularJS 调用 web api 时获取响应为 "data":null,"status":-1答案

【问题标题】：Getting the response as "data":null,"status":-1 when calling web api from AngularJS从 AngularJS 调用 web api 时获取响应为 "data":null,"status":-1
【发布时间】：2017-09-03 16:27:41
【问题描述】：

我正在尝试从 Angular JS 1.6.0 调用 Web API GET 方法并收到以下错误：-

可能未处理的拒绝： {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback" ,"url":"http://localhost:51972/api/video","headers":{"接受":"application/json, 文本/纯文本，/"}},"statusText":""}

当我从 Fiddler 4 调用相同的 GET 方法并返回 JSON 文本时，我得到了正确的 JSON 响应。

请注意，我的 WEB API 和 Angular JS 代码在不同的目录中。

根据 Dez 的评论，我已修改 WebApiConfig.cs 以从 WebAPI 返回 JSON 响应

WebApiConfig.cs

 public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
            config.Formatters.Remove(config.Formatters.XmlFormatter);
        }
    }

视频控制器.cs

public class VideoController : ApiController
{
        [Route("api/video")]
        public List<VideoViewModel> GetVideo()
        {
            List<VideoViewModel> video = new List<VideoViewModel>();
            video.Add(new VideoViewModel { Name = "Hello World", Desc = "Hello World Desc" });
            video.Add(new VideoViewModel { Name = "Hello World1", Desc = "Hello World Desc1" });
            return video;
        }
}

当我输入“http://localhost:51972/api/video”并点击时，我会得到正确的响应（JSON），如下所示：-

 [{"Name":"Hello World","Desc":"Hello World Desc"},{"Name":"Hello World1","Desc":"Hello World Desc1"}]

主页.html

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="../Scripts/AngularControllers/AddVideoController.js"></script>
</head>
<body ng-app="modVid" ng-controller="ctrlVidAdd">
      <table class="table">
        <tr>
            <th>Name</th>
            <th>Desc</th>
       </tr> 
       <tr ng-repeat="a in selectedDisplay">
            <td>{{a.Name}}</td>
            <td>{{a.Desc}}</td>
        </tr>
    </table>
</body>

AddVideoController.js

var myApp = angular.module("modVid", []);
myApp.controller("ctrlVidAdd", function ($scope, $http) {
$http.get('http://localhost:51972/api/video').then(function (response) {
        alert("Hello");
        $scope.selectedDisplay = response.data;
    });
});

当我尝试从 Angular JS 调试 WEB API Get 调用时，我可以看到它正在调用 Web API Get 方法，但没有从 Web API 返回。如您所见，我在 $http 端的响应中添加了警报，这也没有被执行。

任何帮助将不胜感激。

【问题讨论】：

您的 API 响应是一个 XML，您尝试使用 Angular 将其作为 JSON 获取？令人困惑。
嗨 Dez 我已根据您的评论进行了修改。我已经包含了编辑后的代码。仍然在日志中得到相同的响应。对此有什么想法吗？

标签： angularjs asp.net-web-api angularjs-http

【解决方案1】：

您可能需要启用 CORS：

在您的 WebApiConfig.cs 文件中，添加以下内容：

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

CORS 是浏览器在使用脚本进行调用时执行同源策略的检查。使用 Fiddler 之类的东西或直接在浏览器中访问 api 时，您不会看到它。

【讨论】：

当我在浏览器中看到结果时，我不能说我有多高兴。感谢 MichaelDotKnox 让我开心。给你+1。
@user1843970 真的很高兴