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

Posted 2023-02-23

【中文标题】来自 Axios 405 或 415 错误的 Vue.js 和 .NET WEBAPI2 POST

【英文标题】：Vue.js and .NET WEBAPI2 POST from Axios 405 or 415 error

【发布时间】：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 动词？

【参考方案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 对象）。