ASP.NET Core 3.1 在添加 ApiController 属性之前无法处理 Axios 请求

Question

我有以下问题。每当我向 Api 端点发送内容时，ASP.NET Core 3.1 都无法处理该请求。但是，当我添加 ApiController 属性时，它工作得很好。

我的代码是正确的，但只有当我添加这个属性时才有效。怎么会这样？

供参考，这是我的代码

API

[ApiController] //Remove this and the code breaks
[Route("api/SomeApi")]
public class ApiController : Controller {

    private readonly IService service;

    public ApiController(IService service)
    {
        this.service = service;
    }

    [HttpPost]
    [Route("Add")]
    public SomeClass Add(SomeClass foo)
    {
        var userId = service.GetCurrentUserId(User);
        foo.Id = Guid.NewGuid();
        foo.UserId = userId;
        service.Add(foo);
        return foo;
    }
}

JS

axios.post('/api/SomeApi/Add', {
   foo: this.foo,

}).then(function (response: any) {
   this.Id = response.Id;
});

仅供参考，我的 Api 控制器上还有其他方法使用 GET/POST。 GET 方法工作得很好，但 POST 方法仅在我使用查询参数时有效。在这种情况下，我没有使用查询参数，因为我要发送到我的 Api 的数据比示例中实际给出的要多。

我已经尝试使用 [FromBody] 获得回复。它不起作用。相反，我得到了空值。 foo 甚至没有实例化。

Answer 1

绑定request body到model有两种，一种是从form data绑定，另一种是application/json.

对于Controller，它会通过default.For获取表单数据 ApiController，它会默认获取json数据。

如果你想在不使用 [ApiController] 的情况下绑定请求正文，你可以添加 [FromBody]:

//[ApiController] 
[Route("api/SomeApi")]
public class ApiController : Controller
{
    private readonly IService service;
    public ApiController(IService service)
    {
        this.service = service;
    }

    [HttpPost]
    [Route("Add")]
    public SomeClass Add([FromBody]SomeClass foo)
    {
        //do your stuff...
    }
}

型号：

public class SomeClass 
{
    public int Id { get; set; }
    public string Name { get; set; }
}

查看：

@section Scripts{
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post('/api/SomeApi/Add', {
        id: 1,
        name: 'sdfsdf'
    })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
</script>
}

结果：

Answer 2

我遇到了同样的问题并使用 qs 库解决了这个问题以对 JSON 对象进行字符串化。

axios.post('/controller/action', Qs.stringify({Id: 1, Name: 'Test'}))
    .then(function (response) {
        console.log(response);
    })
    .catch(function (response) {
        console.log(response);      
    });

另一种适用于普通对象的方法是使用 URLSearchParams。

var requestData = {Id: 1, Name: 'Test'}
var params = new URLSearchParams();

for(key in requestData)
params.append(key, requestData[key]);

axios.post('/controller/action', params)
.then(function (response) {
    console.log(response);
})
.catch(function (response) {
    console.log(response);      
});

ASP.NET Core 3.1 在添加 ApiController 属性之前无法处理 Axios 请求

ASP.NET Core 3.1 cannot process Axios request until ApiController attribute is added

javascript

ajax

model-binding

asp.net-core

axios