Различные заголовки в Angularjs и JQuery, в то время как POSTing для 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, это то, что атрибут "тип контента", отправляемый на сервер, отличается в jquery и угловом коде. JQuery автоматически добавляет заголовок "content-type multipart/form-data border =blahblahblah...", который angularJS не делает.

Можете ли вы помочь мне понять, что это за фрагмент и почему он добавлен, а также как я могу заставить Angularjs отправлять правильный запрос, чтобы мой код на стороне сервера мог оказаться в CASE 1?

Answer 1

AngularJS по умолчанию попытается преобразовать ваш FormData Объект в JSON (см. https://code.angularjs.org/1.4.4/docs/api/ng/service/$http). Вы можете изменить это, поставив transformRequest: angular.identity в параметре параметров (см. https://code.angularjs.org/1.4.4/docs/api/ng/function/angular.identity).

Я не уверен, почему настройка 'Content-Type' заголовок к "multipart/form-data" явно не работает в этом случае, но это похоже на переопределение Angular по умолчанию "application/json" в undefined как предложено в https://code.angularjs.org/1.4.4/docs/api/ng/service/$http, делает свое дело.

В итоге попробуйте следующее:

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