Calling MVC API within AngularJS?

StackOverflow https://stackoverflow.com/questions/23483999

Question

UPDATE: here is the error i am getting when i do console.log right before the line $scope.Host = data;

XMLHttpRequest cannot load http://..... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:52029' is therefore not allowed access.

I'm trying to call an API that returns JSON data, I'm beginner in AngularJS and what I'm trying to do is to call an API and display the data very simply.

My HTML file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My AngularJS App</title>
    <script src="../scripts/angular.js"></script>
</head>
<body>
    <div data-ng-app="MyModule">

        <table class="table" data-ng-controller="MyModuleCtrl">
            <tr>
                <th>
                    FirstName
                </th>
                <th>
                    MiddleName
                </th>
                <th>
                    LastName
                </th>
                <th>
                    Email
                </th>
                <th>
                    Active
                </th>
            </tr>

            <tr>
                <td>
                    {{Host.FirstName}}
                </td>
                <td>
                    {{Host.MiddleName}}
                </td>
                <td>
                    {{Host.LastName}}
                </td>
                <td>
                    {{Host.Email}}
                </td>
                <td>
                    {{Host.Active}}
                </td>
            </tr>
        </table>
    </div>
    <script src="../scripts/MyApp/App.js"></script>
</body>
</html>

The App.js file:

var MyModule = angular.module("MyModule", []);

MyModule.factory('MyHttpService',
    ['$http', function ($http) {

    return {
        getAll: function () {
            return $http.get('http://api.host.com/host'); //it returns json data
        }
 };
}]);

MyModule.controller('MyModuleCtrl', ['$scope', '$http', '$window', 'MyHttpService', 
    function ($scope, $http, $window, MyHttpService) {

        load();

        function load() {
            MyHttpService.getAll().success(function (data) {
               $scope.Host = data;
            }
        );
    }
}]);
Was it helpful?

Solution

For the sake of offering an answer:

$http.get('http://api.host.com/host'); is why you are getting a CORS/xhr exception. Because that domain is different than that of your angular app, your browser is treating it as a CORS request. You have 2 choices- handle the CORS request on your server, or set the domains the same and remove the CORS problem. If you choose option 1, look at setting CORS response headers that allow your request. If you choose option 2 (make requests to localhost:<urPort>), the code you have should work correctly.

I answered this question where I went into more detail about how CORS works/how the browser handles a CORS request.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top