Issues passing form data to ASP.Net Core Razor Page Handler Method via Fetch (Error 400)

I can’t seem to get this form data to submit to a handler method I have set up. I’m using an onlick attribute of a button that is in each row of a table to execute a JS function:

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);
    });
}

The Handler method is as follows:

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

I’ve tried “/Admin/PMC/Recommendations/ApproveAsync” as well as “/Admin/PMC/Recommendations?handler=OnPostApproveAsync” and “/Admin/PMC/Recommendations/OnPostApproveAsync” for the url, but none of them do much. I’ve tried removing content-type header, or using a different value for it, also tried out mode: ‘same-origin’, and credentials: ‘same-origin.’ I do have standard routing options enabled for the application in program.cs:

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