How can I keep $http from sending my data as a string with quotes?

Question

I'm trying to use an Angular $http POST call to an OAuth token service, and I'm having trouble getting the data format correct.

Right now I'm using the following to paramaterize a simple object, like so:

$.param({
        grant_type: "password",
        username: 'myusername',
        password: 'mypassword'
    })

This produces: grant_type=password&username=myusername&password=mypassword

This output is correct. I need this string, without quotes, to be sent to the server.

I'm using:

$http({
        method: 'POST',
        url: '/services/token',
        data: $.param({
            grant_type: "password",
            username: 'myusername',
            password: 'mypassword'
        }),
        headers: {
            'Content-type': 'application/x-www-form-urlencoded'
        }
    }).success(function(data) {
        $window.alert(data.access_token);
    }).error(function(data) {
        $window.alert('failed');
    });

This produces 400 error on the server because the data sent is: "grant_type=password&username=myusername&password=mypassword" (with quotes)

How can I remove the quotes?

simply try data: { grant_type: 'password', username: 'myusername', password: 'mypassword' } — Pankaj Parkar, Aug 05 '14 at 02:08
Thank you, but using the object instead causes it to be serialized to a JSON string, which is not the same as x-www-form-urlencoded. It would produce: `{"grant_type":"password","username":"myusername","password":"mypassword"}` — Grant H., Aug 05 '14 at 02:09

score 4 · Accepted Answer · edited May 23 '17 at 11:51

Angular's $http has a default request transform that serializes the data to json which adds the quotes. So just override the transformRequest function. You can do that globally as well, see the link below.

var transform = function(data){
    return $.param(data);
}

$http.post("/services/token", {
        grant_type: "password",
        username: 'myusername',
        password: 'mypassword'
    }, {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    transformRequest: transform
});

This question is actually a duplicate: AngularJS - Any way for $http.post to send request parameters instead of JSON?

Ah, I see. Thanks for the information. I was halfway there, but this makes it clearer. — Grant H., Aug 05 '14 at 02:50

score 2 · Answer 2 · edited May 23 '17 at 11:58

After some additional digging I came across another similar question. I like this answer because it's simple, localized, and does not have a jQuery dependency.

How can I make angular.js post data as form data instead of a request payload?

This works:

$http({
    method: 'POST',
    url: '/services/token',
    data: {
        grant_type: "password",
        username: 'myusername',
        password: 'mypassword'
    }),
    headers: {
        'Content-type': 'application/x-www-form-urlencoded'
    },
    transformRequest: function (obj) {
            var str = [];
            for (var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            return str.join("&");
        }
}).success(function(data) {
    $window.alert(data.access_token);
}).error(function(data) {
    $window.alert('failed');
});

It's also worth noting that I'm using ASP.Net Web Api's OAuthTokenProvider. It does not recognize different content types, which is atypical in Web Api because controllers do.

How can I keep $http from sending my data as a string with quotes?

2 Answers2