在AngularJS中調用MVC API？

更新：這裏是我得到的錯誤，當我做console.log就在行$ scope.Host = data;在AngularJS中調用MVC API？

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

來源

2014-05-06 Nick Kahn

您遇到什麼問題？ – Stijn

，因爲該代碼工程... http://plnkr.co/edit/1xaoZbSeY37wJpJYOi0C – calebboyd

你通過瀏覽器/郵遞員/提琴手驗證你的網頁api？ – Brocco

對於提供答案的緣故：

$http.get('http://api.host.com/host');就是爲什麼你得到一個CORS/XHR例外。由於該域名與您的角度應用不同，因此您的瀏覽器將其視爲CORS請求。您有兩種選擇 - 在您的服務器上處理CORS請求，或將域設置爲相同，並刪除CORS問題。如果您選擇選項1，請查看設置允許您請求的CORS響應標頭。如果您選擇選項2（向localhost發出請求：<urPort>），您擁有的代碼應該正常工作。

我回答了this question，在那裏我詳細介紹了CORS如何工作/瀏覽器如何處理CORS請求。

來源

2014-05-07 13:16:07

在AngularJS中調用MVC API？

回答

相關問題