Question

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

可能未经处理的拒绝： { “数据”：NULL， “状态”： - 1， “配置”：{ “方法”： “GET”， “transformRequest”：[空]， “transformResponse”：[空]， “jsonpCallbackParam”： “回调” ， “URL”： “http://localhost:51972/api/video”， “标题”：{ “接受”：“应用/ JSON， text / plain， / “}}，”statusText“：”“}

当我从Fiddler 4调用相同的GET方法并返回JSON Text时，我得到了正确的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);
        }
    }

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方法，但是没有从Web API返回。正如你所看到的那样，我在$ http end的响应中设置了警报，这也没有得到执行。

任何帮助都将不胜感激。

Answer 1

您可能需要启用CORS：

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

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

CORS是浏览器在使用脚本进行调用时执行相同原始策略的检查。在使用像Fiddler这样的东西或直接在浏览器中访问api时，你不会看到它。

获取响应为“data”：null，“status”： - 从AngularJS

1 个答案: