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

Question

我遇到了 Angular $resource 服务的问题。

我正在尝试以不同的方式使用一些表单数据来访问 REST API。

但是每次我点击 API 时，我要么最终在 QueryParams 中发送数据，要么在 Request Payload 中发送数据。

我实际上需要以表单编码的形式发送数据。

我的代码如下：

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

我附上了 angular ajax 请求的快照。

参考上图，虽然我设置了 x-www-form-urlencoded，但内容类型实际上显示的是 application/json。因此，数据在 RequestPayload 而不是 FormData 中输出。

下面是另外一张 jQuery ajax 调用的图片。

在这里，您可以清楚地看到 content-type 是 x-www-form-urlencoded 并且工作正常。

我的疑问是，$resource 没有发送正确的标头，因此数据以 RequestPayload 的形式发送。

有没有人遇到过这个问题？

感谢任何帮助。

谢谢

Answer 1

您可以为此使用转换请求，如下所示。

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

这是由于$http 服务$resouce 中的transformRequest 方法依赖于始终将Content-Type 标头设置为application/json。

要更正此问题，您需要禁用它或更改它以使用将规格设置为您想要的功能。

关于它的好文章在这里：http://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm

试试：

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