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

Posted 2023-05-09

【中文标题】Angular $resource 服务以表单数据而不是请求有效负载发送数据

【英文标题】：Angular $resource service send data in Form Data instead of Request Payload

【发布时间】：2016-12-25 05:06:32

【问题描述】：

我遇到了 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 的形式发送。

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

感谢任何帮助。

谢谢

【参考方案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);
        );
    ;

【参考方案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;

【讨论】：

谢谢。我在发布问题之前尝试了 transformRequest 。但这对我不起作用