Различные заголовки в Angularjs и JQuery, в то время как POSTing для Web Api

Question

Я разрабатываю небольшой кусок для загрузки МНОЖЕСТВЕННЫХ ФОТО, используя Asp.Net Web Api 2 для серверной части и Angularjs для клиентской стороны. Где-то по пути я наткнулся на кусок кода JQuery, который отлично работает, но когда я просто пишу то же самое, используя Angularjs, он ведет себя по-другому, с точки зрения серверной стороны. Вот полное описание того, что происходит: Таким образом, следующий код показывает веб-апите часть:

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

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

      return str; 
     } 

Так как вы можете видеть, если заявление отделяет два случая, которые вызывают у меня неприятность. Теперь на стороне клиента, если я использую следующий JQuery кусок и ударил код Web 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 способ написания этого кода , это всегда заканчивается в случае 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); 
      }); 

Теперь то, что я заметил, используя пункты маркированного на стороне Web API, является то, что атрибут «тип контента», который отправляется сервер отличается в jquery и угловом коде. JQuery автоматически добавляет заголовок «content-type multipart/form-data border = blahblahblah ...», который не угловатый JS.

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

Answer 1

AngularJS по умолчанию попытается преобразовать ваш объект FormData в JSON (см. https://code.angularjs.org/1.4.4/docs/api/ng/service/$http#transforming-requests-and-responses). Вы можете переопределить это, поставив 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#setting-http-headers делает трюк.

В заключение, попробуйте следующее:

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