getting Request failed with status code 404 with axios PUT - axios

Question

I am currently developing a small exchange rate app with Vue 3 and facing a small issue with axios.
The GET request to the endpoint works like a charm, however the PUT doesn't.
This is my axios definition of the endpoint, which I simulate it with json-server.
axios.defaults.baseURL = "http://localhost:3000";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.put["Content-Type"] = "application/json";
The JSON response looks like this:
{
"conversion": [
{
"base": "USD",
"rates": {
"EUR": 0.948434,
"GBP": 0.795324,
"USD": 1,
"CNY": 6.6085
}
},
{
"base": "EUR",
"rates": {
"USD": 1.0543696,
"GBP": 0.838565,
"EUR": 1,
"CNY": 6.967802
}
}
]
}
The GET request to the endpoint looks like this:
async getRates() {
await this.axios.get("/conversion/").then((result) => {
this.conversion = result.data;
this.conversionLoaded = true;
this.getRatesForBase(this.selected);
});
},
However, the PUTrequest throws an 404 error.
editValues() {
this.keys.forEach((key, index) => {
this.editRates(key, this.values[index]);
});
},
async editRates(key, value) {
await this.axios
.put("/conversion", {
base: this.selected,
rates: { [JSON.stringify(key)]: value },
})
.then((resp) => {
console.log(resp.data);
})
.catch((error) => {
console.log(error);
});
},
This is how the payloads looks like, driven from the loop:
{
"base": "EUR",
"rates": {
"GBP": 0.838565
}
}
{
"base": "EUR",
"rates": {
"CNY": 6.967802
}
}
I understand the meaning of the 404 error. Everything looks good to me, but I can't make it work. And I wonder what am I missing. Please help. Many thanks in advance.