React中通过Axios向C#接口传递Post参数问题

你遇到的"Unsupported Media Type"错误，核心原因是前后端的数据格式和请求头不匹配，加上后端参数接收方式不正确导致的。以下是两种可行的解决方案：

方案一：用实体类接收参数（推荐，符合REST规范） #

这是接口开发中最常用的方式，后端定义与前端传递数据结构一致的实体类，直接绑定接收参数。

1. 定义数据模型类 #

public class UserInfo
{
    public string Name { get; set; }
    public string Desc { get; set; }
}

2. 修改Controller方法签名 #

[ApiController]
[Route("[controller]")]
public class CookieController : ControllerBase
{
    [HttpPost]
    public void Post([FromBody] UserInfo userInfo)
    {
        // 直接通过实体类属性获取参数值
        var name = userInfo.Name;
        var desc = userInfo.Desc;
    }
}

3. 优化前端axios请求 #

axios会自动将JS对象序列化为JSON，并设置正确的Content-Type: application/json请求头，无需手动调用JSON.stringify：

axios({
  method: 'post',
  url: '/cookie',
  data: { name: 'John', desc: 'Man' }
});

方案二：直接接收JSON字符串（仅特殊场景使用） #

如果你确实需要后端直接接收JSON格式的字符串，需要确保前端请求头与后端接收方式匹配：

1. 修改前端请求（设置正确的请求头） #

手动设置Content-Type为application/json，同时保留JSON.stringify处理：

axios({
  method: 'post',
  url: '/cookie',
  data: JSON.stringify({ name: 'John', desc: 'Man' }),
  headers: {
    'Content-Type': 'application/json'
  }
});

2. 修改后端方法签名 #

此时后端可以直接接收字符串参数，后续可自行反序列化处理：

[ApiController]
[Route("[controller]")]
public class CookieController : ControllerBase
{
    [HttpPost]
    public void Post([FromBody] string data)
    {
        // data即为前端传递的JSON字符串，示例用Newtonsoft.Json反序列化
        var userInfo = Newtonsoft.Json.JsonConvert.DeserializeObject<UserInfo>(data);
    }
}

关键注意点 #

• 删掉前端代码里的dataType参数：它是axios用来指定响应数据类型的，和请求的Content-Type无关，属于多余配置。
• 后端方法必须添加[FromBody]特性，否则Asp.Net Core无法从请求体中绑定参数。

内容的提问来源于stack exchange，提问作者John