Search code examples
vue.jshttpaxiosbackendfastapi

AXIOS put request doesn't hand JSON parameters to endpoint

I'm currently programming in VUE.

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

My endpoint to add new locations

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

My fetch function with AXIOS

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

Swagger UI Test

Successfull response

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

422 Error

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

Weird behaviour

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?

Solution

  • 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.