Error -1 send parameters using $http.post angular

Question

I have a problem when you submit parameters using $ http.post in angular.

I assume it's some sort of error itself have little knowledge of angular , because in jquery work fine.

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

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

     };

}]);

I have also used many other forms , including the most common

 $http({

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

         })

Errors that occur to me are the following

Is your API actually expecting a JSON payload in the request body? Your jQuery example will send Usuario=user&Password=pass whereas the Angular version will send {"Usuario":"user","Password":"pass"}. It sounds like your API is not set up to handle CORS pre-flight (ie OPTIONS) requests and the header Content-Type: application/json makes it a non-simple request, thus triggering a pre-flight request — Phil
– Phil, Commented Nov 10, 2015 at 0:18
Strange that it works for jquery. It seems like a server decline for that request. Before any request the browser sending an options type request to check if the request method is allowed by the server. In this case the server responded with declined. — Dvir
– Dvir, Commented Nov 10, 2015 at 0:20
@Dvir it's not strange at all. The jQuery POST request is a simple request and thus would not trigger a pre-flight OPTIONS request. — Phil
– Phil, Commented Nov 10, 2015 at 0:34

Phil · Accepted Answer · 2015-11-10 00:33:29Z

3

Short answer: If you want to send the same data as the jQuery example, use this

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

This is because jQuery by default sends POST data as an x-www-form-urlencoded string, ie

Usuario=dfvides&Password=dfvids

Using the code above, Angular will send an identical request to jQuery.

Angular by default sends POST data as JSON with the Content-Type header set to application/json, ie

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

Is your API even set up to handle a JSON payload?

The reason your Angular version was triggering a pre-flight OPTIONS request (which it appears that your API is not equipped to handle) was because the header Content-Type: application/json makes the request 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.)

edited Nov 10, 2015 at 0:33

answered Nov 10, 2015 at 0:26

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dvir Over a year ago

Thanks for the information. For what reason is x-www accepted by def in compare to app/json?

Pedro Miguel Pimienta Morales Over a year ago

Thank you very much , I really appreciate your help , works perfectly , thanks again, you know any tutorial explaining angular to start well .

Phil Over a year ago

@Dvir lack of foresight would be my guess. Even adding an Authorization header causes a CORS request to become non-simple which is a huge pain

Phil Over a year ago

@PedroMiguelPimientaMorales plenty of good information in the Angular guide / docs as well as their example PhoneCat app

Collectives™ on Stack Overflow

Error -1 send parameters using $http.post angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related