主页 / 问题 / 922057
Accepted
Ivan G. Zakirov
Asked:2020-12-17 20:52:34 +0000 UTC2020-12-17 20:52:34 +0000 UTC

VueJs + Axios + Asp.Net MVC 5 错误 415（不支持的媒体类型）

  • 772

在控制器方法中（我也尝试指定[FromBody]，它没有帮助）：

[HttpPost]
public string RegUser(DTM.UserRegDataRequestModel Model)

该参数是一个具有 3 个字符串属性的类。

在 VueJS 上，字段被填写并通过 Axios 传递给控制器​​：

axios.post(URL, RequestData)

尝试发出 Axios 请求时，错误是：

415（不支持的媒体类型）

“RequestData”参数具有与控制器上预期的类完全相同的结构和字段。尝试转换为字符串JSON.stringify(RequestData)，以防 MVC 期望字符串 JSON 被解析并与类匹配。但没有任何反应。

我曾经在 Net.Core 上做过类似的事情，在那里，没有任何额外的转换，控制器通过 Axios 平静地从 Vue 接收对象。那些。使用 [FromBody] 属性将接收到的参数转换为一个类。在这种情况下，它甚至没有开始执行该方法就中断了，只是服务器因错误而被拒绝。

怎么了 ？如何与这个行业交朋友？

补充：

ASP.Net 上的 CORS：

var CorsAttribute = new EnableCorsAttribute("*", headers: "*", methods: "*");
config.EnableCors(CorsAttribute);

VueJs 上的 Axios：

var AxiosInstance = axios.create({
    baseURL: BaseUrl,
    headers: {
        "Content-Type": "application/json, text/plain, */*"
    }
});
asp.net-mvc

1 个回答

  1. Best Answer

    微软在文档中非常清楚地描述了绑定到模型的工作方式：

    它们在细微差别上略有不同 - 所以在经典版本中有 FromUri、FromBody 属性，核心是 FromQuery、FromBody。

    您还可以在此处（经典）和此处（核心）查看使用不同类型绑定的小型实验。哦，它还在书签里。

    在研究这个主题的同时，我还设置了很多小实验来弄清楚它是如何工作的。它非常简单：使用一种方法创建一个小型控制器：

    public class ValuesController : ControllerBase
{
    // POST api/values
    public void Post([FromBody] My value)
    {
    }
}

public class My
{
    public int Id { get; set; }
}

    它被各种请求“解雇”（我通过在 linqpad 中准备一个小脚本来做到这一点，您可以在工作室中使用单独的项目）。脚本基础：

    public class WebRequestHelper
{
    public async Task<string> GetAsync(string uri)
    {
        var client = new HttpClient();
        return await client.GetStringAsync(uri);
    }

    public async Task<string> PostFormAsync(string uri, Dictionary<string, string> data)
    {
        var client = new HttpClient();
        var content = new FormUrlEncodedContent(data);
        var response = await client.PostAsync(uri, content);
        return await response.Content.ReadAsStringAsync();
    }

    public async Task<string> PostAsync(string uri, string jsonString)
    {
        var client = new HttpClient();
        var content = new StringContent(jsonString, Encoding.UTF8, "application/json");     
        var response = await client.PostAsync(uri, content);
        return await response.Content.ReadAsStringAsync();
    }
}

    样品要求：

    // Post samples as webform

unit.PostFormAsync("https://localhost:44323/api/my", new Dictionary<string, string> { { "value", "5" }, })
    .Result.Dump(); // Expected: post, value=5.

unit.PostFormAsync("https://localhost:44323/api/postform", new Dictionary<string, string> { { "value1", "5" }, { "value2", "7" }, })
    .Result.Dump(); // Expected: post, value1=5, value2=7.

// Post samples as json

unit.PostAsync("https://localhost:44323/api/postjson", "\"asdf\"")
    .Result.Dump(); // Expected: post, value=asdf.

unit.PostAsync("https://localhost:44323/api/asdf", "{\"Value1\":5,\"Value2\":\"asdf\"}")
    .Result.Dump(); // Expected: post, value1=5, value2=asdf.

unit.PostAsync("https://localhost:44323/api/asdf", JsonConvert.SerializeObject(new { Value1 = 1, Value2 = "asdf", }))
    .Result.Dump(); // Expected: post, value1=5, value2=asdf.

    （就个人而言，我不知何故浪费了很多时间；我花了很多时间试图弄清楚需要传递什么 json 才能只显示一个字符串 - 现在我记得很清楚：简单asdf，没有任何{}）

    关于提交表单 ( application/x-www-form-urlencoded, multipart/form-data) 的主题，请阅读以下链接：

    笔记。要发送 Web 表单，我们使用 C# 中的字典，在请求正文中发送 json，我们使用 Content-type: application/json 指示 - Microsoft 文档明确指出，绑定位置的选择是通过内容类型，仅此而已。

    [FromBody]：使用配置的格式化程序从请求正文中绑定数据。格式化程序是根据请求的内容类型选择的。

    （强调我的，我引用英文版——那里比翻译更清晰可见。）

    因此，您不必阅读任何萨满教文章，也不必添加任何额外内容：FromBody 引导通过内容类型指示，句号。并且在这方面，微软完全遵守w3c的建议——其他正确的软件也进来了，并且没有放任何拐杖。

    关于您的特定问题的主题（在 vue.js 和 Axios 的上下文中），我在评论中给了您一个链接，我将再次复制它：Vue.js and .NET WEBAPI2 POST from Axios 405 or 415 error

    • 2

相关问题