使用Fetch向ASP.NET Core Razor页面处理方法传表单数据时出错

我无法将表单数据提交至已配置的后端处理方法，当前通过表格每行按钮的onclick属性调用以下JavaScript函数：

function approveRequest(id) {
var formData = new FormData();
formData.append('id', id);

fetch('/Admin/PMC/Recommendations?handler=ApproveAsync', {
    method: 'POST',
    body: formData,
    headers: {
        'Content-Type': 'multipart/form-data',
    },
})
    .then(response => response.json())
    .then(result => {
        console.log('Success:', result);
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

对应的后端处理方法如下：

public async Task<IActionResult> OnPostApproveAsync(string id)
{
await _PocService.ApproveAsync(id);
return new OkResult();
}

捕获到的错误信息：

SyntaxError: Unexpected end of JSON input
at Recommendations:737:44

已尝试的操作：

• 更换URL：试过/Admin/PMC/Recommendations/ApproveAsync、/Admin/PMC/Recommendations?handler=OnPostApproveAsync、/Admin/PMC/Recommendations/OnPostApproveAsync等
• 修改请求头：移除Content-Type头、修改其值
• 添加请求参数：mode: 'same-origin'和credentials: 'same-origin'

应用的Program.cs路由配置：

app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    endpoints.MapBlazorHub();
});

问题原因及修复方案 #

核心问题

1. JSON解析失败：后端返回的OkResult()没有任何JSON内容，但前端强制调用response.json()解析空响应，直接触发"Unexpected end of JSON input"错误。
2. 缺少防伪造令牌：Razor Pages默认启用请求验证，POST请求必须携带RequestVerificationToken，否则会被拦截返回400错误，间接导致解析失败。
3. 错误设置Content-Type：手动设置multipart/form-data会丢失FormData自动生成的boundary参数，后端无法正确解析表单数据。

修复步骤

前端代码修改

function approveRequest(id) {
    var formData = new FormData();
    formData.append('id', id);
    // 获取页面中的防伪造令牌
    const token = document.querySelector('input[name="__RequestVerificationToken"]').value;

    fetch('/Admin/PMC/Recommendations?handler=ApproveAsync', {
        method: 'POST',
        body: formData,
        // 移除手动设置的Content-Type，让fetch自动处理
        headers: {
            'RequestVerificationToken': token
        },
    })
    .then(response => {
        // 先验证响应状态，再处理结果
        if (response.ok) {
            console.log('审批操作成功');
            // 这里可以添加页面刷新、表格状态更新等逻辑
        } else {
            // 非成功响应时获取文本错误信息
            return response.text().then(errorText => { throw new Error(errorText) });
        }
    })
    .catch(error => {
        console.error('操作失败:', error);
    });
}

后端代码可选优化

如果需要给前端返回JSON格式的结果，可修改返回类型：

public async Task<IActionResult> OnPostApproveAsync(string id)
{
    await _PocService.ApproveAsync(id);
    // 返回JSON格式的成功标识
    return new JsonResult(new { Success = true, Message = "审批完成" });
}

此时前端可以恢复response.json()调用，解析返回的JSON数据。

URL确认

Razor Pages的handler规则是：页面路径?handler=方法名前缀（去除OnPost/OnGet），所以/Admin/PMC/Recommendations?handler=ApproveAsync是正确的URL，无需更换。

内容的提问来源于stack exchange，提问作者L. Wallach