Получение ответа в виде data:null,status:-1 при вызове веб-API из AngularJS

Я пытаюсь вызвать метод GET веб-API из Angular JS 1.6.0 и получаю следующую ошибку: -

Возможно необработанное отклонение: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam" :"обратный вызов","url":"http://localhost:51972/api/video" ,"headers":{"Принять":"application/json, text/plain, /"}},"statusText":""}

Я получаю правильный ответ JSON, когда вызываю тот же метод GET из Fiddler 4 и возвращаю текст JSON.

Обратите внимание, что мой WEB API и код Angular JS находятся в разных каталогах.

Согласно комментарию Деза, я изменил WebApiConfig.cs, чтобы вернуть ответ JSON от WebAPI.

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

Когда я пытаюсь отладить вызов WEB API Get из Angular JS, я вижу, что он вызывает метод Get Web API, но из Web API ничего не возвращается. Как видите, я поместил предупреждение в ответ в конце $http, который также не выполняется.

Любая помощь будет оценена по достоинству.


angularjs asp.net-web-api angularjs-http
person simple user    schedule 08.04.2017    source источник
comment
Ваш ответ API представляет собой XML, и вы пытаетесь получить его как JSON с помощью Angular? Это сбивает с толку.   -  person Dez    schedule 08.04.2017
comment
Привет Дез, я изменил в соответствии с вашим комментарием. Я включил отредактированный код. Все еще получаю тот же ответ в журнале. Есть идеи по этому поводу?   -  person simple user    schedule 08.04.2017

Ответы (1)


arrow_upward
6
arrow_downward

Вероятно, вам нужно включить CORS:

В файле WebApiConfig.cs добавьте следующее:

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

CORS — это проверка браузером соблюдения политики того же источника, когда вызов выполняется с использованием сценария. Вы не увидите его при использовании чего-то вроде Fiddler или при доступе к API непосредственно в браузере.

person MichaelDotKnox    schedule 09.04.2017
comment
Не могу сказать, насколько я радуюсь, когда вижу результат в браузере. Спасибо MichaelDotKnox за то, что сделали мой день. Вот +1. - person simple user; 09.04.2017
comment
@ user1843970 Искренне с удовольствием - person MichaelDotKnox; 09.04.2017