AJAXのHttp POSTリクエストは完全に機能しますが、AngularJSでは動作しません

Question

私はAngularJSに問題があります。私は、Spring-SecurityでJava Spring REST Webアプリケーションを保護する作業を行っています。 Imはロギングページに詰まっています - http postはAJAXを使って完全に動作しますが、AngularJSを使っている間はうまくいきません。

jQuery(document).ready(function ($) { 
    $('#login-form').submit(function (event) { 
     event.preventDefault(); 
     var data = 'username=' + $('#username').val() + '&password=' + $('#password').val(); 
       console.log(data); 
     $.ajax({ 
      data: data, 
      timeout: 1000, 
      type: 'POST', 
      url: 'http://localhost:8080/OnlineGameStore/login' 

     }).done(function(data, textStatus, jqXHR) { 
      console.log("Done!") 

     }).fail(function(jqXHR, textStatus, errorThrown) { 
      alert('Booh! Wrong credentials, try again!'); 
     }); 
    }); 
    }); 

このAJAXコードは完全に動作し、資格情報はサーバーに正しく送信されます。しかし：

angular.module('login').controller('LoginCtrl', function($scope, $http, $location, AuthUser){ 

$scope.login = function(){ 
    AuthUser.authenticateUser($scope.username, $scope.password, $location).then(function(response){ 
     console.log(response); 
    }); 

}; 
}); 

angular.module('login').service('AuthUser', function($http, $location){ 

    this.authenticateUser = function(username, password, $location){ 
     var absUrl = $location.absUrl(); 
     console.log(absUrl); 

     var data = { 
      username: username, 
      password: password 
     }; 

     var config = { 
       headers : { 
        'Content-type': 'application/json' 
       } 

     return $http.post(absUrl, data, config) 
      .then(
       function(response){ 
        return "Successfully logged!"; 
       }, 
       function(response){ 
        window.alert("Failure!"); 
     }); 
    }; 

}); 

このdoesntの仕事 - データイマイチでも適切に私が見るすべてはヌルです（と私は401のすべての時間を取得する）代わりに提供されたユーザ名とパスワードを、サーバーに送信します。 URLは同じです。誰かが私を助けることができますこれを解決する？

私はまた、 'データ'オブジェクトの代わりに裸の文字列を送信しようとしましたが、それも動作していないようです。

Answer 1

jQueryはデフォルトでContent-Type: x-www-form-urlencodedとデータを送信し、AngularJS $httpサービスはContent-Type: application/jsonで送信します。

あなたはjQueryのようなデータを送信したい場合は、次のようにリクエストヘッダを設定します。

var data = { 
     username: username, 
     password: password 
    }; 

    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; 

    return $http.post(absUrl, data) 
     .then(
      function(response){ 
       return "Successfully logged!"; 
      }, 
      function(response){ 
       window.alert("Failure!"); 
    }); 

が、これは$httpサービスのグローバル構成であることを忘れないでください。

バックエンドを実行している技術はわかりませんが、デフォルトのAngularJSヘッダーapplication/jsonを使用する方がよい場合がよくあります。

違いは何ですか？ application/x-www-form-urlencodedで

データは、例えば、URIによって送信さ：.NET MVC WebAPIので?parm1=1&parm2=2&parm3=3

これはのためにバインドされます：Content-Type: application/jsonで

[HttpPost] 
public HttpResponseMessage Simple(int parm1, int parm2, int parm3) { 

} 

データは、例えば、JSON形式のペイロードが送信されます：.NET MVC WebAPIので{ parm1: 1, parm2: 2, parm3: 3 }

これがためにバインドされます。

[HttpPost] 
public HttpResponseMessage Simple(Parameters parameters) { 

}