I am facing an issue when using Axios request to access a method in the backend. I am constrained by pre-existing code in both frontend and backend that limits how much I can modify or add.
Frontend:
const response = await axiosConfig.put<IReserved>(
`my_url/${id}`,
null,
{
params: {
...body,
},
}
);
Upon checking with console logs, both Id and Body contain correct values. The hurdle seems to be passing them to the backend.
Backend:
[HttpPut("{id}"), Authorize]
public async Task<ActionResult<BasicInfoResponse>> UpdateItem(int id, [FromQuery] Request request)
Surprisingly, the code never enters this method, making it impossible to debug.
The final URL submitted (from logs) is as follows:
https://localhost:7216/api/Items/592087867?Var1=900&Var2=592087867&Var3=&Var4=1&Var5=&Var6=&Var7=0882578014
In this URL, Id appears as Var2.
The issue might be that the backend expects Id and other parameters separately, with ID coming first, while here everything is jumbled up. Some variables do not have values, which shouldn't be problematic since they are optional, but could this be causing the problem?
My attempted solutions:
- Modifying the structure of the request in the frontend, like adding "Id" to "params" or placing it outside:
const response = await axiosConfig.put<IReserved>(
`my_url/${id}`,
null,
{
params: {
id,
...body,
},
}
);
const response = await axiosConfig.put<IReserved>(
`my_url/${id}`,
id,
{
params: {
...body,
},
}
);
Eliminate "Id" from HttpPut("{id}") in the backend or function parameters.
[HttpPut, Authorize] public async Task<ActionResult<BasicInfoResponse>> UpdateItem(int id, [FromQuery] Request request) [HttpPut("{id}"), Authorize] public async Task<ActionResult<BasicInfoResponse>> UpdateItem([FromQuery] Request request)Send all parameters without Id, as it already exists in the URL, or include it as one of the parameters.
const response = await axiosConfig.put<IReserved>(
`my_url`,
null
{
params: {
...body,
},
}
);
- Tried submitting only the Id without any other data, which successfully accesses the method, ruling out possible errors related to wrong function names.
In all scenarios, I receive either status 400 or status 405.