来自 Axios 405 或 415 错误的 Vue.js 和 .NET WEBAPI2 POST答案

【问题标题】：Vue.js and .NET WEBAPI2 POST from Axios 405 or 415 error来自 Axios 405 或 415 错误的 Vue.js 和 .NET WEBAPI2 POST
【发布时间】：2019-03-11 12:19:56
【问题描述】：

我无法发布到我的 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)
     })
   }

我的所有请求的 Content-Type 都设置为 application/json

如果我使用 FormData 部分调用 PostTest Vue 方法并将 [FromBody] 属性保留在 .NET API Post 方法上，我会收到以下 415“不支持的媒体类型”错误：

{"Message":"请求实体的媒体类型'multipart/form-data'是此资源不支持。","ExceptionMessage":"否 MediaTypeFormatter 可用于读取“字符串”类型的对象来自媒体类型为“multipart/form-data”的内容。",

因此，即使我为 Content-Type 指定了 application/json，它仍然会以 multipart/form-data 的形式出现

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

{"Message":"请求的资源不支持http方式 '发布'。"}

我已经为此奋斗了一段时间。看来我可以执行以下选项之一：

使用 FormData vue 调用，如何通过 multipart/form-data 问题解决 415 错误？
使用 JSON 字符串如何在 API 调用中支持 POST 动词？

【问题讨论】：

标签： c# rest vue.js asp.net-web-api2 axios

【解决方案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 中检查请求，您会看到参数被编码为

=字体空间

2) 作为 Content-Type application/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 编码

“字体空间”

只要您的编码和您的内容类型匹配，WebAPI2 就会接受您的请求。

This documentation was helpful

当参数有 [FromBody] 时，Web API 使用 Content-Type 标头来选择格式化程序。在此示例中，内容类型是“application/json”，请求正文是原始 JSON 字符串（不是 JSON 对象）。

【讨论】：