通过 Ajax 在 ASP.NET Core Web API 中的 POST 上出现 400 错误请求（不是针对控制器，而是针对同一页面事件处理程序）

Question

我在 .NET 8 和 VS2022 中使用 ASP.NET Core Razor 页面。

我试图让我的控制器对公众隐藏，所以我所有的

POST

请求首先调用同一页面。例如

www.mywebsite.com/index

将调用索引页的 ASP.NET Core 事件处理程序。

场景1

当我尝试通过 Ajax post 上传时（如果我使用防伪令牌调用控制器，它会起作用），它会触发控制器操作。但 Razor 页面失败，同一页面的事件处理程序

场景2

当我尝试上传到同一索引页面时，我收到错误的请求。这是我的代码。我尝试使用

IActionResult

并添加

ImageUpload

类（在下面注释掉），两者都会产生相同的结果： BAD REQUEST

//public async Task<IActionResult> OnPostAsync(ImageUpload imageUpload)
public async Task OnPostAsync()
{
    var file = Request.Form.Files[0];
    var fileName = Path.GetFileName(file.FileName);
    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads", fileName);

    using (var fileStream = new FileStream(filePath, FileMode.Create))
    {
        await file.CopyToAsync(fileStream);
    }

    //return Content($"File '{fileName}' uploaded successfully.");
}

这是我的前端代码。我尝试使用我在网上看到的 JSON.Stringfy 的示例，但这也不起作用：

$('#fileInput').change(function () {
    var token = $('#__RequestVerificationToken').val();
        
    var file = this.files[0];

    if (file) {
        var reader = new FileReader();
        var formData = new FormData();
        formData.append('file', file);
        reader.onload = function (e) {
            $('#previewImage').attr('src', e.target.result).show();

            var formData = new FormData();
            formData.append('file', file);
            var formData2 = JSON.stringify(formData);
            $.ajax({
                type: "POST",
                url: "",//this enables it to post to the root
                contentType: "application/json",
                processData: false,
                data: formData2,
                headers: {
                            RequestVerificationToken: token
                        },
                success: function (response) {
                    console.log('File uploaded successfully');
                },
                error: function (xhr, status, error) {
                    console.error('Error uploading file:', error);
                }
            });
        };
    }
});

最后，这是我的 HTML：

<form>
 @Html.AntiForgeryToken()
<p>
    <input type="file" id="fileInput" accept="image/*">

    <br><br>
    <img src="" id="previewImage" style="max-width: 300px; max-height: 300px; display: none;">
</p>
</form>

Answer 1

您可以使用

F12

在源选项卡中查看令牌值，在

var token = $('#__RequestVerificationToken').val();

设置断点，它显示：

更改为：

var token = $('input:hidden[name="__RequestVerificationToken"]').val();