AXIOS put request doesn't hand JSON parameters to endpoint [duplicate]

Question

I'm currently programming in VUE.

This is a endpoint I made with fastAPI to add a location

In order to add locatons from my component, I created a function in my VUE component called fetchNewLocation:

I tested my endpoint before with swagger ui, and everything works correctly:

However, when I try to execute the function that uses AXIOS, I get the 422 Unprocessable Entity Error:

Also in my response, it doesn't seem like the paramters reached the backend at all:

I also tried fetch as an alternative to AXIOS, but I still got the 422 Error.

Honestly at this point, I'm out of options. I know for sure that the paramters I give in the function are valid strings, and the endpoint is so simply constructed that I don't see potential for any other mistake I could have made. I also use AXIOS in another function to send a GET request, and that works for whatever reason.

If my PUT works in swagger ui, why not in AXIOS? What did I do wrong?

Answer 1

Data is sent from client side as request body but it's expected on server side as query parameters, which is incorrect for PUT. This expectation can be seen in Request URL in Swagger UI.

The endpoint needs to be changed to accept data as request body instead of parameters.

Answer 2

Add a proxy in your package.json file, change 3000, to the port number of your server, and try again.

"proxy": "http://localhost:3000",