Angularjs 和 JQuery 中的不同 headers，同时发布到 Web Api

Question

我正在开发一个用于上传多张照片的小程序，使用服务器端的 Asp.Net Web Api 2 和客户端的 Angularjs。一路上的某个地方，我遇到了一段 JQuery 代码，它工作得很好，但是当我简单地使用 Angularjs 编写完全相同的东西时，从服务器端的角度来看，它的行为不同。以下是对所发生情况的完整描述：因此，以下代码显示了网络 api 片段：

public async Task<string> PostAsync()
        {
            List<string> str = new List<string>();

            if (Request.Content.IsMimeMultipartContent())
            {
                // CASE 1...
            }
            else
            {
                // CASE 2...
            }

            return str;
        }

如您所见，if 语句将给我带来麻烦的两种情况分开了。现在在客户端，如果我使用以下 JQuery 片段并访问网络 api 代码，它总是 [成功] 以案例 1 结束：

var data = new FormData();
        for (i = 0; i < files.length; i++) {
            data.append("file" + i, files[i]);
        }
        $.ajax({
            type: "POST",
            url: scope.serviceBase + "api/Property/PostAsync",
            contentType: false,
            processData: false,
            data: data,
            success: function (response) {
                alert(response);
            },
            error: function () {
                alert("Error while invoking the Web API");
            }
        });

但是如果我使用相同的 Angularjs 方式编写该代码，它总是以 CASE 2 结束，这基本上是一个失败：

var data = new FormData();
            for (i = 0; i < files.length; i++) {
                data.append("file" + i, files[i]);
            }
http.post(scope.serviceBase + 'api/Property/PostAsync', data, { headers: {'Content-Type':'multipart/form-data'} }).success(function (response) {
                alert(response);
            })
            .error(function (response) {
                alert(response);
            });

现在我在网络 api 端使用项目符号注意到，发送到服务器的 "content-type" 属性在 jquery 和 angular代码。 JQuery 自动添加 "content-type multipart/form-data boundary=blahblahblah..." header 而 angularJS 不会。

你能帮我理解那部分是什么以及为什么要添加它，还有我如何才能 Angularjs 发送正确的请求以便我的服务器端代码可以在案例 1 中结束？

Answer 1

AngularJS 默认会尝试将您的 FormData object 转换为 JSON（参见 https://code.angularjs.org/1.4.4/docs/api/ng/service/$http#transforming-requests-and-responses). You can override this by supplying transformRequest: angular.identity in the options parameter (see https://code.angularjs.org/1.4.4/docs/api/ng/function/angular.identity）。

我不确定为什么在这种情况下将 'Content-Type' header 显式设置为 "multipart/form-data" 不起作用，但它看起来像是覆盖 Angular 的按照 https://code.angularjs.org/1.4.4/docs/api/ng/service/$http#setting-http-headers 中的建议，将 "application/json" 默认设置为 undefined 就可以了。

总而言之，请尝试以下操作：

$http.post(scope.serviceBase + 'api/Property/PostAsync', data,
        { transformRequest: angular.identity, headers: {'Content-Type':undefined} })

Angularjs 和 JQuery 中的不同 headers，同时发布到 Web Api

Different headers in Angularjs and JQuery, while POSTing to Web Api

jquery

multipartform-data

request-headers

asp.net-web-api

angularjs