Why is ajax sending the request to a different url than what I coded?

I'm making a simple Todolist. A put request is sent using ajax for html data, but the put request is sent to an url different from the url shown in the ajax URL. What should I do?

Javascript :

const submitAdd = document.querySelector("#add");
const addFormData = document.querySelector("#addForm");

const sendPutMethod = () => {
  const quote = addFormData[0].value;
  const author = addFormData[1].value;
  const formData = {
    quote: quote,
    author: author,
  };
  $.ajax({
    cache: false,
    type: "put",
    dataType: "String",
    url: "settingQuote/add",
    data: JSON.stringify(formData),
    success: data => {
      console.log(data);
    },
    error: (request, status, error) => {
      console.log(request, status, error);
    },
  });
};

submitAdd.addEventListener("click", sendPutMethod);

Error code :

PUT http://localhost:4500/settingQuote 404 (Not Found)

HTML :

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title setting quote
    include includes/head.pug
  body 
    form(id="addForm")
      input(type="text", name="quote", placeholder="quote") 
      input(type="text", name="author", placeholder="author")
      input(type="submit", value="add", id="add")

router :

router.put("/settingQuote/add", (req, res) => {
  console.log(req.params);
  const quote = new Quote(req.body);
  try {
    quote.save();
    console.log("Create data success!");
    res.redirect("back");
  } catch (e) {
    console.log(e);
  }
});