Ошибка Vue.js и .NET WEBAPI2 из Axios 405 или 415 - PullRequest
Новая
       18

Ошибка Vue.js и .NET WEBAPI2 из Axios 405 или 415

0 голосов
/ 06 октября 2018

У меня проблемы с отправкой сообщений в мой WEBAPI.

Мой код для моего ASP.NET WEBAPI выглядит следующим образом: 

[RoutePrefix("api/Test")]
   public class TestController : ApiController
   {
       // GET: api/Test
       [Route]
       public IEnumerable<string> Get()
       {
           return new string[] { "value1", "value2" };
       }

       [Route]
       public void Post([FromBody]string value)
       {
           Debugger.Break();
       }

Вызовы из моего приложения Vue.js через axiosследующие: 

   PostTest(){
       alert("Post Test Starting");
       var data = new FormData();
       data.set('value','test');
       //var data = {'value': 'test'};
       this.CallAxios('post', 'http://localhost:10000/api/Test/', data, axiosHeaders);
   },
   CallAxios(callMethod, callURL, callData, callHeaders)
   {
     axios({
       method: callMethod,
       url: callURL,
       data: callData,
       headers: callHeaders
     }).then((response) => {
       alert(response.data)
     })
   }

Мой тип контента для всех запросов установлен на application / json

Если я вызываю метод PostTest Vue с использованием раздела FormData и оставляю атрибут [FromBody]в методе .NET API Post появляется следующая ошибка 415 «Неподдерживаемый тип мультимедиа»:

{«Сообщение»: «Тип мультимедиа объекта запроса« multipart / form-data »не поддерживается дляthis resource. "," ExceptionMessage ":" MediaTypeFormatter недоступен для чтения объекта типа 'String' из содержимого с типом мультимедиа 'multipart / form-data'. ",

Так что, хотяЯ указал application / json для Content-Type, он все еще выглядит как multipart / form-data

Если я переключу код Vue.js на использование "var data = {'value': 'test'} "и я удаляю атрибут [FromBody] из параметра .NET Postя получаю следующую ошибку 405 «Метод не разрешен»:

{«Сообщение»: «Запрашиваемый ресурс не поддерживает http-метод« POST ».»}

Я боролся с этим некоторое время.Кажется, я могу сделать один из следующих вариантов:

  1. Используя vue-вызов FormData, как мне получить ошибку 415 с проблемой multipart / form-data?
  2. Использованиестроку JSon, как мне поддержать глагол POST в вызове API?

1 Ответ

0 голосов
/ 12 декабря 2018

Есть два способа сделать это (ни один из них не будет использовать FormData)

1) Отправка как Content-Type: application / x-www-form-urlencoded .Для этого вам необходимо закодировать URL-адрес параметра с помощью библиотеки, такой как qs.Однако обратите внимание на это специальное предостережение WebAPI (имя пустого ключа) 

import qs from 'qs';
let myValue = 'FontSpace'
let options = {
    url: '/api/fonts'
    , method: 'post'
    , data: qs.stringify({ '': myValue })
}
let response = await this.$http(options)

Если вы проверите запрос в devtools, вы увидите, что параметр закодирован как

= FontSpace

2) Отправка в виде приложения типа контента / json .Для этого вам нужно JSON.stringify просто указать значение (без ключа), а также явно указать тип содержимого в заголовках 

let myValue = 'FontSpace'
let options = {
    headers: { 'Content-Type': 'application/json' }
    , url: '/api/fonts'
    , method: 'post'
    , data: JSON.stringify(myValue)
}
let response = await axios(options)

Проверять в devtools, и вы увидите, что параметр получает код JSON

"FontSpace"

Пока ваша кодировка и тип контента совпадают, WebAPI2 будет принимать ваш запрос.

Эта документация была полезна

Когда параметр имеет значение [FromBody], веб-API использует заголовок Content-Type для выбора средства форматирования.В этом примере тип содержимого - «application / json», а тело запроса - необработанная строка JSON (не объект JSON).

...