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

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.

Answer 2

Here is a simple working demo you could follow:
Model
public class Command
{
public string Status { get; set; }
public IFormFile FileField { get; set; }
}
View
#page
#model IndexModel
<form asp-page="Index" 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" />
<button id="btnSave" type="button" onclick="PostFile()" class="btn btn-warning">Save</button>
</form>
#section Scripts
{
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function PostFile()
{
const httpClient = axios.create({
baseURL: document.location.origin,
headers: {
'X-Requested-With': 'XHR',
'Content-Type': 'multipart/form-data',
"RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
}
});
let formData = new FormData();
formData.append("FileField", $("#Command_FileField")[0].files[0]);
formData.append("Status", $("#Command_Status").val());
httpClient.post($('form').attr('action'), formData)
.then(function (response) {
})
.catch(function (error) {
});
}
</script>
}
PageModel
public class IndexModel : PageModel
{
[BindProperty]
public Command Command { get; set; }
public void OnGet()
{
}
public async Task<IActionResult> OnPostAsync()
{
//do your stuff...
}
}