Angular $ resource服务以表单数据而不是请求有效载荷发送数据

Question

I'm facing an issue with angular $resource service.

I'm trying to hit a REST API with some form data in different ways.

But every time I hit the API, I either end up sending the data in QueryParams or Request Payload.

I actually need to send the data as form encoded.

My code looks as below:

var headers = {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        };


var save = function (url, params, headers, successcb, successParams, errorcb, errorParams) {
            var promise = $resource(url, null, {
                upload: {
                    method: methodPost,
                    headers: headers
                }
            }).save({}, params).$promise;

            promise.then(function (response) {
                successcb(response.data, successParams);
            }, function (error) {
                errorcb(error, errorParams);
            });
        };

I've attached a snapshot of the angular ajax request.

Referring to the image above, the content type is actually showing application/json though I've set x-www-form-urlencoded. Hence the data is going out in RequestPayload instead of FormData.

Below is one more image of jQuery ajax call.

Here, you can clearly see that the content-type is x-www-form-urlencoded and it is working fine.

My doubt here is, $resource is not sending out proper headers because of which the data is going in the form of RequestPayload.

Is there anyone out there who has faced this issue?

Any help is appreciated.

Thanks

Answer 1

You can use transform request for that, like below.

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

    var headers = {
        'Content-Type' : 'application/x-www-form-urlencoded;charset=UTF-8'
    };

    var save = function(url, params, headers, successcb, successParams, errorcb, errorParams) {
        var promise = $resource(url, null, {
            upload : {
                method : methodPost,
                headers : headers,
                transformRequest : transform

            }
        }).save({}, params).$promise;

        promise.then(function(response) {
            successcb(response.data, successParams);
        }, function(error) {
            errorcb(error, errorParams);
        });
    };

Answer 2

This is due to the transformRequest method in the $http service $resouce is dependent on which always sets the Content-Type header to application/json .

To correct this, you need to disable it or change it to use a function which sets the specs to what you want.

Good article on it here: http://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm

Try:

var promise = $resource(url, null, {
    upload: {
        method: methodPost,
        headers: headers,
        transformRequest: []        
    },
}).save({}, params).$promise;