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

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

I am trying to call Web API GET Method from Angular JS 1.6.0 and getting the following error:-

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":""}

I am getting the proper JSON response when I call the same GET method from Fiddler 4 and returning JSON Text.

Please note that my WEB API and Angular JS code are in different directory.

As per Dez's comment I have modified WebApiConfig.cs to return JSON response from 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);
        }
    }

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

When I type 'http://localhost:51972/api/video' and hit then I get proper response(JSON) as below:-

 [{"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;
    });
});

When I try to debug WEB API Get call from Angular JS then I can see that it is calling Web API Get method but nothing is returning from Web API. As you can see I put alert in the response at $http end which is also not getting executed as well.

Any help would be appreciated.

Solution

You probably need to enable CORS:

In your WebApiConfig.cs file, add this:

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

CORS is a check by the browser to enforce same origin policy when the call is made using scripting. You won't see it when using something like Fiddler or when accessing the api directly in the browser.