2016-12-03 6 views
0

enter image description here私はログインページを作成し、Web APIを使用して認証するanjular jsアプリケーションを作成しています。これはjsonを返すコントローラであり、正常に動作しています。HTTPエラー405.0 - angeljsアプリケーションからweb-apiにアクセスする際にメソッドが許可されない

[Route("api/Customer/{id}/{pass}")] 
public IEnumerable GetCustomer(string id, string pass) 
{ 
     var list = repository.Get(id, pass); 

     if (list != null) 
     { 
      return list; 
     } 
     else 
     { 
      return null; 
     } 
} 

この角度アプリ(demoApi.js)でAPIにアクセスするコントローラである

(function() { 
    'use strict'; 
    var DemoApi = function ($http) { 
    var loginCheck = function (username, password) { 
     return $http.get("http://localhost:8115/api/Customer/" +username+"/"+password) 
      .then(function (response) { 
       return response.data; 
      }); 
     }; 
     return { 
      loginCheck: loginCheck 
     } 
    }; 

    var app = angular.module("angularApp"); 
    app.factory("DemoApi", DemoApi); 

}()); 

これは、これがインデックスであるログイン・コントローラ(loginController.js)

(function() { 
var app = angular.module("angularApp"); 

var loginController = function ($scope, $http, bankApi, $location) { 
    var userDetails = { 
     username: $scope.uName, 
     password: $scope.uPassword 
    }; 

    $scope.login = function() { 
     DemoApi.loginCheck(userDetails.username, userDetails.password) 
      .then(onLogin, onError); 
    }; 

    var onError = function (reason) { 
     $scope.error = "Could not fetch the data."; 

    }; 
    var onLogin = function (data) { 
     $scope.details = data; 
     $location.path("/info"); 
    }; 
} 

app.controller('loginController', loginController); 
}()); 

あります私はすべてのスクリプトがリンクされているページ

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularApp"> 
    <head> 
    <title>Ebank</title> 
    <script src="Scripts/angular.js"></script> 
    <script src="Scripts/angular-route.js"></script> 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
    <script src="lib/app.js"></script> 
    <script src="lib/bankApi.js"></script> 
    <script src="lib/loginController.js"></script> 
    <script src="lib/infoController.js"></script> 
    </head> 
    <body style="background-color:#333"> 
    <div ng-view></div> 
    </body> 
</html> 

iはhtmlページから直接このAPIを呼び出すが、おそらくdemoApi.js

+0

http://stackoverflow.com/questions/19093603/simple-post-to-web-apiを参照してください。コントローラーメソッドよりも[HttpPost]属性がありません – Amitd

+0

まだ動作していません.. @ Amitd – abhishek

+0

get顧客が私に配列またはjsonオブジェクトを返していますが、角度のアプリケーションで応答データを取得する方法 – abhishek

答えて

0

からの応答を得ていない場合、私は応答を取得していますなぜイムdemoApi.js からAPIを呼び出すことができませんソリューション、を私に提供しますあなたはCORSの問題にぶつかった。 CORSを有効にする必要があります。下記の手順に従ってください。

  1. C:\ Program Files(x86)\ IIS Express \ AppServerにあるIISExpress設定ファイルapplicationhost.configを開きます。
  2. "httpProtocol"タグを検索します。内部に「customHeaders」タグが存在するかどうかを確認します。そうでない場合は追加してください。
  3. 「customHeaders」タグ内に次の2つのタグを追加します。

<add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" />

別の方法としては、コマンドプロンプトで次のコマンドを使用してセキュリティ無効モードでchormeブラウザを実行し、そこから自分のサイトにアクセスしてみてください。

--disable-ウェブセキュリティ--user-データ-dirの

をchrome.exeへの完全なパスは、CORSを有効にする必要があり、生産の展開にしかし、あなたのアプリケーションをテストするために、そのわずかな回避策に注意してください。

+0

まだそれは動作していません..? – abhishek

関連する問題