来自Axios 405或415的Vue.js和.NET WEBAPI2发布错误

Question

我在发帖到我的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();
       }

   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，它仍然被理解为multipart/form-data

如果将vue.js代码切换为使用“var data={'value':'test'}”，并从.NET Post参数中删除[FromBody]属性，则会收到以下405“method Not alloved”错误：

{“消息”：“请求的资源不支持http方法'post'。”}

1. 使用FormData vue调用，如何通过multipart/form-data问题得到415错误？
2. 使用JSon字符串如何在API调用中支持POST谓词？

Answer 1

有两种方法可以实现这一点（这两种方法都不使用FormData）

1）发送为content-type：application/x-www-form-urlencoded。要做到这一点，您需要使用像qs这样的库对参数进行URL编码。但是，请注意这个特殊的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中检查请求，您将看到参数被编码为

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

这篇文档很有帮助

当参数具有[FromBody]时，Web API使用Content-Type头来选择格式化程序。在本例中，内容类型是“application/JSON”，请求主体是一个原始JSON字符串（而不是JSON对象）。