I have a problem with using Axios request to access method in backend. Unfortunately, I have to use pre-made by others code in both backend and frontend and there is a limit to how much I can change or write anew.
Frontend:
const response = await axiosConfig.put<IReserved>(
`my_url/${id}`,
null,
{
params: {
...body,
},
}
);
I checked with console logs, and both Id and Body seem to have correct values. As I understand, the problem is with passing them on to backend.
Backend:
[HttpPut("{id}"), Authorize]
public async Task<ActionResult<BasicInfoResponse>> UpdateItem(int id, [FromQuery] Request request)
I can't even debug it, the code doesn't enter this method at all.
The final url submitted (from logs) looks like that:
https://localhost:7216/api/Items/592087867?Var1=900&Var2=592087867&Var3=&Var4=1&Var5=&Var6=&Var7=0882578014
Id here appears as Var2.
Might the problem be, that backend wants Id and other params separately and also Id coming first, when here everything is in a "mess"? Also some variables don't have values, indeed I didn't upload any of them, since they should be non-mandatory, but maybe this can cause the problem?
What I tried so far:
- Changing the structure of request in frontend, like adding "Id" to "params" or outside of it:
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,
},
}
);
To remove "Id" from HttpPut("{id}") in backend or from 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 only the all params without Id, since it already appears in the url, or/and add it as one of params.
const response = await axiosConfig.put<IReserved>(
`my_url`,
null
{
params: {
...body,
},
}
);
- Tried to submit only the Id without all other stuff, it does access the method, so the error is not with mistyped name of function or whatever.
In all cases I am getting either status 400 or status 405.