Question

更新：这是我在$ scope.Host = data;

行之前console.log时得到的错误

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.

我正在尝试调用返回JSON数据的API，我是AngularJS的初学者，而我正在尝试的是调用API并非常简单地显示数据。

我的HTML文件：

<!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>

App.js文件：

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

Answer 1

为了给出答案：

$http.get('http://api.host.com/host');是您获得CORS / xhr异常的原因。由于该域与您的角度应用程序的域不同，因此您的浏览器将其视为CORS请求。您有2个选择 - 在您的服务器上处理CORS请求，或者设置域相同并删除CORS问题。如果选择选项1，请查看设置允许您请求的CORS响应标头。如果您选择选项2（向localhost发出请求：＆lt; urPort＆gt;），您所拥有的代码应该可以正常工作。

我回答this question，其中详细介绍了CORS如何工作/浏览器如何处理CORS请求。

在AngularJS中调用MVC API？

1 个答案: