Calling MVC API within AngularJS?

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

because that code works... plnkr.co/edit/1xaoZbSeY37wJpJYOi0C — calebboyd
– calebboyd, Commented May 6, 2014 at 0:47
the problem is that it not getting data and yes i verified in the browser and it does spit json data. — Nick Kahn
– Nick Kahn, Commented May 6, 2014 at 1:00
$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. — J.Wells
– J.Wells, Commented May 6, 2014 at 1:33

Community · Accepted Answer · 2017-05-23 12:05:10Z

1

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.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered May 7, 2014 at 13:16

J.Wells

1,75912 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling MVC API within AngularJS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related