Using Express and Axios, Axios will not recognize PUT Requests - node.js

Question

I have dumbed down my use case to a simple test, in which I click a button and an UPDATE put request is sent using an axios API. Three other request methods-- post, get, and delete, all work properly and are recognized. My PUT method, however, gives a 404 Not Found error, as though I havent established the method with express in my server.
This is the code for the request, triggered by this event handler (for the button):
const handleUpdate = async (e, id) => {
e.stopPropagation();
// navigate(`/restaurants/${id}/update`);
//update test
try {
const updatedRestaurant = await RestaurantFinder.put(`/${id}`, {
name: "taco bell",
location: "dogtown",
price_range: "2"
});
console.log(updatedRestaurant);
navigate("/");
} catch(err) {
console.log(err);
}
};
This is the api's instantiation:
import axios from "axios";
export default axios.create({
baseURL: "http://localhost:3001/api/v1/restaurants"
}
);
This is the request in Express. Note that the first log "does this exist???" is never displayed. The address for the put request to "http://localhost:3001/api/v1/restaurants/id" is never found.
//UPDATE a restaurant
app.put("/api/v1/restaurants/:id"), async (req, res) => {
console.log("does this exist???");
try {
const results = await db.query(
"UPDATE restaurants SET name = $1, location = $2, price_range = $3 where id = $4 returning *",
[req.body.name, req.body.location, req.body.price_range, req.params.id]
);
res.status(200).json({
status: "succes",
data: {
restaurant: results.rows[0],
},
});
} catch (err) {
console.log(err);
}
console.log(req.params.id);
console.log(req.body);
};
I have pored over StackOverflow for answers, I think I've viewed over 50 posts at this point. This is something that should be so simple, and yet I can't find a single answer for it or see where it's happening to anyone else.
If anyone could please help walk me through what is going wrong, I would be so grateful!
Edit 1 #Stephen:
const app = express();
app.use(cors(
{
methods: ["POST", "GET", "DELETE", "PUT"]
}
));
app.use(express.json());
So i changed it to this with no luck. Originally i was just using cors(), and my understanding is that it defaults to allowing a put method.

Answer 1

Does your server allow the put method? Perhaps your server only allows the others in the access-control-allow-methods field.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods
For testing over http, make sure both of these are set by your server.
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS