XMLHttpRequest PUT请求失效：NODEJS API无法接收请求

嘿，我帮你排查了下代码里的问题，这几个点应该就是导致PUT请求没被正确处理的原因：

1. 请求头设置时机错了！ #

你在xhr.open()之前就调用了xhr.setRequestHeader()，这不符合浏览器的XMLHttpRequest规范——请求头必须在调用open()之后、send()之前设置。提前设置的话，浏览器会直接忽略这个请求头，服务器就没法正确识别你发的JSON格式请求体，甚至可能导致请求根本发不出去。

2. 服务器端响应逻辑有多重响应风险 #

你的PUT接口里，if (error)和if (result.changedRows == 0)之后都没加return，这会导致就算已经给客户端发了错误提示或者“未修改”的响应，代码还会继续往下执行到res.json(req.params.Id)，尝试再次发送响应。Node.js不允许同一个请求多次响应，这会触发内部错误，直接导致请求异常中断。

3. 前端参数类型不匹配（潜在坑） #

你前端的Prezzo是数字输入框，但用value拿到的是字符串类型，而数据库里的Prezzo应该是数值类型。虽然MySQL会自动转换，但显式转成数字能避免一些奇怪的类型错误。

修改后的客户端UpdateProdotti函数 #

function UpdateProdotti() {
  var id = document.getElementById("Mid").value;
  var descrizione = document.getElementById("Mdescrizione").value;
  // 把价格转成数字类型
  var prezzo = parseFloat(document.getElementById("Mprezzo").value);
  var categoria = document.getElementById("Mcategoria").value;

  const data = {
    Descrizione: descrizione,
    Prezzo: prezzo,
    Categoria: categoria
  };
  
  const xhr = new XMLHttpRequest();
  // 先打开请求连接
  xhr.open("PUT", "api/prodotti/" + id, true);
  // 再设置请求头，顺序不能乱
  xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
  
  xhr.onload = function () {
    if (this.readyState == 4) {
      if (this.status == 200) {
        alert("Modificato " + xhr.responseText);
      } else {
        // 新增错误状态的提示，方便排查
        alert("Errore durante la modifica: " + xhr.responseText);
      }
    }
  };
  // 加上请求发送失败的处理
  xhr.onerror = function() {
    alert("Impossibile connettersi al server");
  };
  
  xhr.send(JSON.stringify(data));
}

修改后的服务器端PUT接口代码 #

app.put('/api/prodotti/:Id', function (req, res) {
  connection.query(
    "UPDATE Prodotti SET Descrizione=?, Prezzo=?, Categoria=? WHERE Id=?",
    [req.body.Descrizione, req.body.Prezzo, req.body.Categoria, req.params.Id],
    function (error, result) {
      if (error) {
        console.error("Errore query: ", error.message);
        // 返回500错误码并终止后续代码
        return res.status(500).send("Errore query: " + error.message);
      }
      if (result.changedRows == 0) {
        // 返回404状态码，明确告知客户端没找到或没修改
        return res.status(404).send("Non modificato! Nessun record trovato o nessun cambiamento");
      }
      console.log("Id modificato: " + req.params.Id);
      res.json(req.params.Id);
    }
  );
});

额外要检查的点 #

• 确保你的Node.js项目里已经加了JSON解析中间件：app.use(express.json())。如果没加的话，服务器根本解析不了你发的JSON请求体，req.body会是undefined，这也会导致PUT请求看似没被处理。
• 打开浏览器开发者工具（按F12），切换到Network标签，看看PUT请求的状态码、请求头和请求体，确认请求是不是真的发出去了，格式对不对。

内容的提问来源于stack exchange，提问作者Riccardo Raffini