javascript - 错误-1 使用$http.post angular 发送参数

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 默认将 POST 数据发送为 JSON，并将 Content-Type header 设置为 application/json，即

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

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

---

您的 Angular 版本触发 pre-flight OPTIONS 的原因请求(看起来您的 API 没有能够处理)是因为 header Content-Type: application/json 发出请求 non-simple ...

A simple cross-site request is one that:

• Only uses GET, HEAD or POST. If POST is used to send data to the server, the Content-Type of the data sent to the server with the HTTP POST request is one of application/x-www-form-urlencoded, multipart/form-data, or text/plain.
• Does not set custom headers with the HTTP Request (such as X-Modified, etc.)