错误 -1 使用 $http.post 角度发送参数

Question

当你在 Angular 中使用 $ http.post 提交参数时遇到问题。

我认为这是某种错误本身对 angular 知之甚少，因为在 jquery 中工作正常。

请求 jquery'javascript

var user = $('#usuariotxt').val();
var pass = $('#passwordtxt').val();

var login= {
              Usuario : user,
              Password : pass
       };

       $.ajax({

          type: 'POST',
          url:  'http://190.109.185.138/Apipedro/api/login',
          data: login,
          datatype: 'json'

        }).done(function(data) {

                console.log(data);
        });

请求 Angular-Javascript

var app;

app = angular.module('AppUPC',[]);

app.controller('Formulario',['$scope', '$http', function ($scope, $http){

    $scope.login = function(){

        var login = {
            Usuario: $scope.usuariotxt,
            Password: $scope.passwordtxt
        };

        console.log(login);

        var url, method;
        url = 'http://190.109.185.138/Apipedro/api/login';
        method = 'POST';


         $http.post("http://190.109.185.138/Apipedro/api/login", {}, 
                    {params: {Usuario:$scope.usuariotxt, Password:$scope.passwordtxt} 
         }).success(function (data, status, headers, config) {
                $scope.persons = data;
                console.log($scope.persons);

        }).error(function (data, status, headers, config) {
                $scope.status = status;
                console.log($scope.status);
        });

     };

}]);

我也用过很多其他的形式，包括最常见的

 $http({

            url: url,
            method: method,            
            data: login,
            headers :{'Content-Type':'application/json'}

         })

我遇到的错误如下

Answer 1

简短回答：如果您想发送与 jQuery 示例相同的数据，请使用此

app.controller('Formulario', ['$scope', '$http', '$httpParamSerializer', function ($scope, $http, $httpParamSerializer) {

    // snip

    $http.post(url, $httpParamSerializer(login), {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function success(response) {
        $scope.persons = response.data;
    }, function error(response) {
        $scope.status = response.status;
    });
}]);

这是因为jQuery默认发送POST数据作为x-www-form-urlencoded字符串，即

Usuario=dfvides&Password=dfvids

使用上面的代码，Angular 会向 jQuery 发送一个相同的请求。

默认情况下，Angular 以 JSON 格式发送 POST 数据，并将 Content-Type 标头设置为 application/json，即

{"Usuario":"dfvides","Password":"dfvids"}

您的 API 是否设置为处理 JSON 负载？

---

您的 Angular 版本触发 pre-flight OPTIONS 请求（似乎您的 API 没有能够处理）的原因是标头 Content-Type: application/json 发出请求 non-simple.. .

一个简单的跨站点请求是：

• 仅使用GET、HEAD 或POST。如果使用POST向服务器发送数据，则通过HTTP POST请求发送给服务器的数据的Content-Type为application/x-www-form-urlencoded、multipart/form-data或@987654339之一@。
• 不使用 HTTP 请求设置自定义标头（例如 X-Modified 等）