从 AngularJS 调用网络 api 时得到 "data":null,"status":-1 的响应

Question

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

Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://localhost:51972/api/video","headers":{"Accept":"application/json, text/plain, /"}},"statusText":""}

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

请注意我的WEBAPI和AngularJS代码在不同的目录下。

根据 Dez 的评论，我已将 WebApiConfig.cs 修改为 return JSON 来自网络的响应 API

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);
        }
    }

VideoController.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"}]

Home.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 方法，但没有任何 returning来自网络 API。如您所见，我在 $http 端的响应中放置了警报，它也没有被执行。

如有任何帮助，我们将不胜感激。

Answer 1

您可能需要启用 CORS：

在您的 WebApiConfig.cs 文件中，添加：

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

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

从 AngularJS 调用网络 api 时得到 "data":null,"status":-1 的响应

Getting the response as "data":null,"status":-1 when calling web api from AngularJS

asp.net-web-api

angularjs

angularjs-http