Axios post returning 405 - Method Not Allowed (Dot Net Core 6, Razor Page & Axios)

Question

I am facing issue with Axios, if I post simple form data it is all working fine. But if I add file input and configures Axios to post files as well, then Server returns error in response "405 - Method not allowed".

Axios configuration which works with simple data:

const httpClient = axios.create({
    baseURL: document.location.origin,
    headers: { 'X-Requested-With': 'XHR'}
});

Axios configuration which is NOT working in case of post files

const httpClient = axios.create({
    baseURL: document.location.origin,
    headers: { 'X-Requested-With': 'XHR', 'Content-Type': 'multipart/form-data'}
});

Razor Page Post Method:

public async Task<IActionResult> OnPostAsync()
{
    //await Mediator.Send(Command);

   
    return RedirectToPageJsonResult("./");
}

Cshtml snippet:

<form method="post" data-os-trigger="xhr" class="form-horizontal form-groups-bordered" enctype="multipart/form-data">
                    <input type="text" asp-for="@Model.Command.Status"/>
                    <input type="file" asp-for="@Model.Command.FileField" />
                    
                    <div class="row button">
                        <div class="col-md-12 text-center">
                           
                            <button id="btnSave" type="submit" class="btn btn-warning">Save</button>
                            <button type="reset"  class="btn btn-light">Clear</button>
                        </div>
                    </div>
</form>

JS event which post data:

let formData = new FormData($this[0]);
       
        let formParams = new URLSearchParams(formData);
        
        httpClient.post($this[0].action, formParams)
            .then(function (response) {
                                 
               
            })
            .catch(function (error) {
               
            });

Answer 1

I found the issue with my code. If you see in my code there are two lines to get params of Form:

let formData = new FormData($this[0]); 
let formParams = new URLSearchParams(formData);

I was passing formParams as argument in AXIOS call, which was causing the issue. Instead I had to use formData parameter. Once I did that, it was all working fine for me.