Попытка отправить FormData из приложения Angular 5 в веб-API ASP.NET 4.6.1: получение ошибки неподдерживаемого типа носителя

Итак, в моем внешнем приложении Angular у меня есть форма, и в файле typescript я создаю новый объект formdata и добавляю к нему элементы следующим образом:

public postFormData() {
    const form = $('#customListForm')[0];
    const formData = new FormData();

    formData.append('tenant', form[0].value);
    formData.append('username', form[1].value);
    formData.append('password', form[2].value);

    formData.append('CL_title', form[3].value);
    formData.append('CL_description', form[4].value);
    formData.append('CL_contentType', form[5].value);
    formData.append('CL_template', form[6].value);

    this.http.post(this.apiURL, formData).catch(this.errorHandler).subscribe(res => this.formPosted(res));
    // this.http.get(this.apiURL).catch(this.errorHandler).subscribe(res => this.formPosted(res));
  }  

В конце концов, мои данные формы заполнены правильно. Теперь, когда я пытаюсь отправить это в свой веб-API ASP.NET 4.6.1, это дает мне следующую ошибку:

POST http://localhost:52613/api/customlist 415 (Unsupported Media Type) 

Здесь вы можете увидеть мой код API:

// POST api/customlist
    [HttpPost]
    public System.Web.Http.IHttpActionResult Post(CustomList data)
    {
        var test = HttpContext.Current.Request;
        var testje = data;

        return Ok("POST all good");
    }  

Я предполагаю, что «данные CustomList» неверны? Мне бы хотелось, чтобы formData привязывался к моей модели, моя модель имеет те же поля, что и здесь:

public class CustomList
{
    public string Tenant { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
    public string CL_title { get; set; }
    public string CL_description { get; set; }
    public string CL_contentType { get; set; }
    public string CL_template { get; set; }
}  

В моих заголовках я вижу следующее:

Response Headers: Content-Type: application/json
Request Headers: Content-Type: multipart/form-data  

Может ли это быть проблемой?

Странная часть: ранее я также создал веб-API .NET Core 2, и мое действие публикации выглядит следующим образом (не обращайте внимания на файлы):

// POST api/input
    [HttpPost]
    public async Task<IActionResult> Post(SPInputObject data)
    {            
        var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
        string filePath = Path.Combine(uploads, data.File.FileName);

        if (System.IO.File.Exists(filePath))
        {
            System.IO.File.Delete(filePath);
        }

        if (data.File.Length > 0)
        {
            using (var fileStream = new FileStream(filePath, FileMode.Create))
            {
                await data.File.CopyToAsync(fileStream);
            }
        }

        ProvisioningService service = new ProvisioningService();
        service.CreateSiteCollection(data.Tenant, data.Title, filePath);

        return Ok("POST all good");
    }  

Когда я отправляю свою SAME Angular form/formdata в этот контроллер API + действие, он войдет в POST.... Итак, почему это нормально, отправляя его в мой веб-API .NET Core 2, но не в мой веб-интерфейс ASP.NET 4.6.1? API?

Кто-нибудь знает, в чем может быть проблема?

РЕДАКТИРОВАТЬ: попытка добавить тип содержимого к моему внешнему запросу Angular не работает, вот что я пробовал:

private httpOptions = {
  headers: new Headers({
    'Content-Type': 'application/json'
  })
};  

Изменение моего http-сообщения (я добавил this.httpOptions):

this.http.post(this.apiURL, formData, 
this.httpOptions).catch(this.errorHandler).subscribe(res => 
this.formPosted(res));  

Затем он выдает следующую ошибку в моем this.httpOptions:

 "message": "Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'.\n  Types of property 'headers' are incompatible.\n    Type 'Headers' is not assignable to type 'Headers'. Two different types with this name exist, but they are unrelated.\n      Property 'keys' is missing in type 'Headers'."

person Tempuslight    schedule 11.04.2018    source источник
comment
Вы пытались украсить свой параметр API с помощью FromBody? [FromBody] CustomList data   -  person Daniel W Strimpel    schedule 11.04.2018
comment
К сожалению, это ничего не меняет :( Я все еще вижу в своих инструментах chrome dev 415 неподдерживаемый тип носителя)   -  person Tempuslight    schedule 11.04.2018
comment
Вы пытались установить заголовок Content-Type для вашего запроса в коде Angular на application/json?   -  person Daniel W Strimpel    schedule 11.04.2018
comment
Нет, я тоже не могу заставить это работать: я добавил то, что пытался отредактировать, в свой ОП.   -  person Tempuslight    schedule 11.04.2018
comment
Можете ли вы попробовать изменить эту строку headers: new Headers({ на headers: new HttpHeaders({   -  person Thangadurai    schedule 11.04.2018
comment
Я заставил это работать, я использовал устаревшую версию Http, и это должен быть HttpClient, а также строку заголовков, о которой вы говорили, мне пришлось изменить. Но сейчас мои данные в моем почтовом действии равны нулю, поэтому я могу ввести свое действие, но ничего не передается успешно...   -  person Tempuslight    schedule 11.04.2018
comment
Вы сделали первое, что я упомянул?   -  person Daniel W Strimpel    schedule 11.04.2018
comment
Да, я добавил FromBody, и я получаю свои данные как объект CustomList, но, к сожалению, все поля пусты.   -  person Tempuslight    schedule 11.04.2018


Ответы (2)


Вы публикуете FormData. Большинство браузеров автоматически устанавливают для Content-Type значение "multipart/form-data", когда вы указываете экземпляр FormData. Если вы измените код для использования Content-Type "application/json", вам также следует изменить объект запроса, чтобы он использовал не FormData, а JSON:

public postFormData() {
    const form = $('#customListForm')[0];

    const requestData = {
       tenant: form[0].value,
       username: form[1].value,
       password: form[2].value,
       CL_title: form[3].value,
       CL_description: form[4].value,
       CL_contentType, form[5].value,
       CL_template: form[6].value
    };

    this.http.post(this.apiURL, requestData);
}  
person David Walschots    schedule 11.04.2018

Попробуйте настроить тип содержимого application/json и кодировку utf-8 на угловой стороне или на стороне asp.net, лучше на обоих. Обычно это вызвано этими двумя вещами. Привязка модели ядра Asp.net работает несколько иначе. Вот хорошая статья об этом

Привязка модели JSON POST в ASP.NET Core

person Peter Húbek    schedule 11.04.2018