Axios 与 .NET Core WebAPI 传参错误(400或415)

最新推荐文章于 2025-05-19 17:24:44 发布

原创最新推荐文章于 2025-05-19 17:24:44 发布 · 3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#.netcore #前端 #vue #ajax #asp.net

本文探讨了前端Ajax请求与后端API接口对接时出现的400和415错误，分析了数据类型不匹配、Content-Type设置不当及基本类型参数接收问题。提供了两种修复方案：一是调整前端发送数据格式和指定Content-Type为application/json，二是后端创建对应数据模型接收。总结了确保数据类型一致、正确设置Content-Type和指定参数特性的重要性。

文章目录

1. 报错（400或415）

前端代码：

export function refreshToken(token) {
  return ajax({
    url: "/api/user/refreshToken",
    method: "post",
    data: { token },
  })
}

后端代码：

public ActionResult RefreshToken(string jwt)
{
    //接口内容
}

2. 分析

(1). 前端发送和后端接收的数据类型要一致

上述代码 token 为字符串，data 是 token 强行封装的对象，而后端接口参数是字符串类型，所以产生400错误。

(2). 前端发送的内容类型有时要手动指定

Axios发送字符串数据时，headers 默认的 Content-Type 为 “application/x-www-form-urlencoded”，需要指定为 “application/json”。否则可能产生415错误。

(3). 基本类型参数的接收要指定参数特性

开启默认推理规则时（不指定参数特性时），对于基本类型（例如string）的参数，不能推理出去哪里接收，需要显示指定参数特性为[FromForm] 或者 [FromBody] 等等。否则可能产生400错误。

3. 修复

方案一

前端代码：

export function refreshToken(token) {
  return ajax({
    url: "/api/user/refreshToken",
    method: "post",
    data: token,
    headers: { "Content-Type": "application/json" },
  })
}

后端代码：

public ActionResult RefreshToken([FromBody] string jwt)
{
    //接口内容
}

方案二

前端代码：

export function refreshToken(token) {
  return ajax({
    url: "/api/user/refreshToken",
    method: "post",
    data: { "token":token },
  })
}

后端代码：

public ActionResult RefreshToken(JwtReq jwt)
{
    //接口内容
}
public class JwtReq
{
    public string Token { get; set; }
}

4. 总结

满足上述分析的三点可以避免一部分此类错误。

对于 get 方式或者用 params 传参的情况，原则同上。

本文仅供参考，未必能解决所有相似问题。